通過CSS選擇器將參數傳遞給javascript函數

因此，簡而言之，我有一套的。李通過CSS選擇器將參數傳遞給javascript函數

<ul> 
    <li class="lmit_1"><a href="#" >Home</a></li> 
    <li class="lmit_2"><a href="#">About us</a></li> 
    <li class="lmit_3"><a href="#">Who we are</a></li> 
    <li class="lmit_4"><a href="#">Whats new</a></li> 
    <li class="lmit_5"><a href="#">Contact Us</a></li>  
</ul>

和我的JavaScript（jQuery的）

<script> 
    $(".lmit_" + id).click(function() { 
    alert(id); 
    }); 
</script>

我所試圖做的在css類的末尾接收到任何數字作爲參數（例如.lmit_3允許id = 3），因此alert（id）應該導致數字3的彈出窗口？我是新來編程和JavaScript的，所以如果我的道歉答案是盯着我的臉......

來源

2012-09-06 Melbourne2991

爲什麼你不能給他們所有人一個普通的類，並使'lmit_n'和'id'？擁有獨特的課程幾乎沒有用處。 – Blender

@Blender：或者更好的是，使用數據屬性來攜帶這個數據。 –

演示：http://jsfiddle.net/sFwZj/1/

$('li').click(function() { 
    alert($(this).attr('class').split('_')[1]); 
});

在你的代碼使用一個名爲id未聲明的變量，所以它應該拋出錯誤ReferenceError: id is not defined，當你嘗試".lmit_" + id。

同時，我認爲你應該使用id這不是class，也因爲很可能提到它會更好，如果你將在什麼數字存儲像data-id屬性，那麼你可以通過$(this).data('id')得到它。

來源

2012-09-06 03:52:25

'$（「.lmit_」+ id）'？ – timidboy

我想你的代碼這工作，但不是「.lmit_」+編號 – Melbourne2991

作品，謝謝堆！出於好奇，我的代碼試圖做什麼？還是完全不符合標準？ – Melbourne2991

$("li").click(function() { 
  alert(this.className.split('_')[1]); 
});

應該這樣做

但是，爲什麼不

    <ul> 
    <li class="lmit" id="lmit_1"><a href="#" >Home</a></li> 
    <li class="lmit" id="lmit_2><a href="#">About us</a></li>

與

$(".lmit").click(function() { 
  alert(this.id.split('_')[1]); 
})

來源

2012-09-06 03:57:05 mplungjan

試試這個

$('ul li').on('click', function(){ 
    alert($(this).prop('class').split('_')[1]); 
});

來源

2012-09-06 04:00:55 Codegiant

@ user1650757是代碼工作？ – Codegiant

可能最好存儲要在數據屬性中使用的任何數據。這樣你就不會過分依賴類和id（以及字符串處理），並且在格式和功能之間有一些分離。

你的HTML看起來像這樣：

<ul> 
<li class="lmit" data-myattr="1"><a href="#" >Home</a></li> 
<li class="lmit" data-myattr="2"><a href="#">About us</a></li> 
</ul>

注意，數據myattr可以稱爲一個「數據 - 」前綴任何東西。

訪問您的數據

 $(".lmit").click(function(){ 
//you can access it as an attribute 
     alert($(this).attr("data-myattr")); 
//or you can access it as data 
      alert($(this).data("myattr")); 
     })

或更沒有階級的解決方案使用事件代表團

$("ul").delegate("li", "click", function() { 
alert($(this).data("myattr")); 
});

所以你不需要lmit類的都在你的HTML

<ul> 
<li data-myattr="1"><a href="#" >Home</a></li> 
<li data-myattr="2"><a href="#">About us</a></li> 
</ul>

來源

2012-09-06 04:04:28 Michal

上面的答案都是正確的。如果您想要獲取<ul>中的物品編號，則可以選擇其他選項。

$('li').click(function() { 
    alert($(this).index()+1); 
});

的好處是，你不會有生成的類名（如果這就是他們用於）

來源

2012-09-06 04:07:35 rkw

$('[li][class^="lmit_"]').click(function() { 
    alert($(this).attr('class').split('_')[1]); 
});

如果使用$（「禮」）如果u點擊在任何李沒有「limit_」類也將被解僱。

來源

2012-09-06 06:03:26 Thulasiram

通過CSS選擇器將參數傳遞給javascript函數

回答

相關問題