我在工作中遇到的JS問題彙總
1.tabmenu問題
這個問題我一直在網上參考原始碼，參考了很多原始碼，但是我感覺很難處理，我自己困惑的地方有這樣幾點。
1、我只能通過getElementById(“tab”)在讀取他的子元素時我只能getElementsByTagName(“li”)，那麼我如何才可以去讀取他的classname呢？這個我很不清楚，也寫了，但是是無法通過的，我很不能理解，希望有高人可以替我解釋一下。
2、給一個元素增加新的classname的過程中時，我發現addclass（），被認為是沒有定義的函式，我自己經過測試經過各種查資料發現只有通過x.className += ” “+”selected”;你還必須加個“ ”，否則class的名字就直接是AB而不是我們想要的A B了。
3、移除classname時，x.replace是行不通的。
4、左右側必須一一對應控制檯會報錯。
【我參考的資料【挺有用的，很詳細，不像網上就只有原始碼，這個也從思想的角度剖析了】，很棒，建議大家去看一下】
我自己的程式碼如下，然後這個根據上方的那個資料，真的很棒，這裡的JS和HTML一點關係都沒有，不需要去更改css樣式，也不需要去用複雜的什麼OPACITY透明化。
<script>
function changetab(){
var tabs=document.getElementById("tab").getElementsByTagName("li");
for(var i=0;i<tabs.length;i++){
tabs[i].onclick=tab;
}
}
function 9-24補充
仿別人網站時發現一個更加簡單的tabmenu的程式碼，非常簡短
html：
<ul class="bonus-tab">
<li class="active"><a href="javascript:couponTab(0)">可使用</a></li>
<li class=""><a href="javascript:couponTab(1)">不可使用</a></li>
</ul>
<div class="bonus-tab-cont active">
<ul class="bonus-list">
<li>
<div class="nobonus">1</div>
</li>
</ul>
</div>
<div class="bonus-tab-cont active">
<ul class="bonus-list">
<li>
<div class="nobonus">1</div>
</li>
</ul>
</div>
js：
function couponTab(a)
{
$(".bonus-tab li").removeClass("active");
$(".bonus-tab li").eq(a).addClass("active");
$(".bonus-tab-cont").removeClass("active");
$(".bonus-tab-cont").eq(a).addClass("active");
}③
$(function($) {
$('.index-message-nav li a').click(function() {
$(".index-message-nav li a[class='active']").removeAttr("class");
$(this).addClass("active");
// $(this).addClass("active").siblings().removeClass();
$('.index-message-down > div').hide().eq($('.index-message-nav li a').index(this)).show();
});
});3、上次做移動端的時候發現用了min-height:100%使背景圖片平鋪了移動端整個螢幕防止造成背景圖片不夠大底部留白的情況。但是今天遇到的這個又無法實現了【我並不知道為什麼】
然後只能用JS實現
程式碼如下
//使背景鋪滿整個螢幕
$(function(){
$('.con').height($(window).height());
})
JS程式碼
window.onload=function(){
var con=document.getElementById('con');
//var conHeight=con.offsetHeight;
var c=document.documentElement.clientHeight;
con.style.height=c+'px';
}一開始是我用了JQ那樣的程式碼，後來發現不可以，因為我讓他的offsetHeight等於瀏覽器當前頁面的clientHeight，一旦con中沒有內容，那麼還是失效的，只有這個方法才是可以的
4、點選功能
①給父節點中每一個子節點都繫結點選事件
$(".order-name").children().click(function(){}）
②消除同級的class樣式
5、關於active的問題
在工作中常常會遇到這樣的情況，給某按鈕增加點選後的active樣式
之前我在做的時候都是先判斷是否有active類，沒有的話給他加，有的話給他去掉這個類。
但是今天我遇到一個問題，有兩個input，我必須只能點選其中一個。但是用radio來做的話樣式是非常不好看的，因為字只能在○的後面顯示，就像這個樣子【○ 1 ○ 2】。
但是用span我就不會做了，後面百度了資料，有了好的方法
go to http://www.cnblogs.com/web-sheena/p/4206465.html
我的程式碼
$(this).toggleClass('active').siblings('XX').removeClass('active');然後以後我在遇到此類問題，一行程式碼就可以解決了，不用再去判斷是否有active類，太棒！！
JQ:
6.我們常常會做到這樣的，在註冊頁面對使用者名稱、郵箱、手機號碼等進行判斷。但是如果直接用click事件你會發現當二次改變後並不會出現錯誤提示。
還有一點需要注意的是。要對輸入的數值進行實時判斷，一旦輸入的數值有改變則提示的東西會立刻消失，再次進行判斷
go to http://www.jb51.net/article/60789.htm
一定要在input後面加上[type=xx]，
一定要在input後面加上[type=xx]
一定要在input後面加上[type=xx]
重要的事情說三遍
因為如果不加的話他會受到干擾，點選下一個input會再發生請輸入XX的事情
//對input輸入的焦點事件的判斷
$('input[type=xx]').bind("blur",function(){
var Value=$(this).val();
var isEmpty=false;
if(Value==""){
$('.error').html("請輸入XX");
$('.error').show();
console.log("請輸入手機號碼");
isEmpty=true;
}
if(!isEmpty&&phoneValue!=""){
if(Value.length!=x){
$('.error').hide();
$('.error').html("手機號碼格式錯誤");
$('.error').show();
console.log("格式錯誤");
}
else{
$('#register-phone-error').hide();
console.log("true");
}
}
//實時監測變化
$('input[type=x]').bind('input propertychange', function(){
$('#register-phone-error').hide();
});
});
7.點選文字後文字改變,再點選後變回原來的文字
<span onclick="javascript:this.innerHTML=(this.innerHTML=='一二三'?'四五六':'一二三');">一二三</span>8、像淘寶客戶端那樣分別勾選
父元素的同級節點只選擇一個
$('.address-list li').on('click', '.address-list-title', function() {
var obj = $(this).closest('li');
if ($(this).hasClass('select')) {
$(this).removeClass('select').find('i.select').html('');
obj.removeClass('has-select');
}
else {
if (obj.hasClass('has-select')) {
return false;
} else {
$(this).addClass('select').find('i.select').html('');
obj.addClass('has-select');
}
}
});$('.confirm-pay-rem').click(function() {
var html = $('.confirm-pay-rem i').html();
$(this).removeClass('active');
if ($(this).hasClass('select')) {
$(this).removeClass('select').find('i').html('');
} else {
$(this).addClass('select').find('i').html('');
}
});
$('.confirm-pay-layer').on('click', '.confirm-layer-title', function() {
var obj = $(this).closest('li');
if ($(this).hasClass('select')) {
$(this).removeClass('select').find('i').html('');
obj.removeClass('has-select');
} else {
if (obj.hasClass('has-select')) {
return false;
} else {
$(this).addClass('select').find('i').html('');
obj.addClass('has-select');
}
}
});