Jquery - 如何获取列表项中的元素

Jquery - How to get elements in a list item

本文关键字：列表 元素 获取 何获取 Jquery      更新时间：2023-09-26

我有以下代码：

                <li class="shop-currencies">
                    <a href="#" id="EUR" data-currency="EUR">€</a>
                    <a href="#" id="GBP" data-currency="GBP">£</a>
                    <a href="#" id="USD" data-currency="USD">$</a>
                    <a href="#" id="ZAR" data-currency="ZAR" class="current">R</a>
                </li>

当单击项目时，我想将类设置为单击的项目并获取单击的项目的 ID。这是我到目前为止所拥有的：

$('.shop-currencies').click(function() {
    var id = $(this).attr('id');
    alert(id);
    /**
     * Remove the classes from the currency elements
     */
    $('.shop-currencies').find('a').each(function(e) {
       $(this).removeClass();
    });
    /**
     * Set the class of the clicked element
     */
    $( '#' + id).addClass('current');

});

ID 返回为"未定义" 如何获取点击链接的 ID？

谢谢

您需要将

点击处理程序附加到子锚元素：

$('.shop-currencies a').click(function() {
var id = $(this).attr('id');
alert(id);
 /**
 * Remove the classes from the currency elements
 */
   $('.shop-currencies').find('a').not(this).removeClass('smclass')
 /**
 * Add class to current elements
 */
   $(this).addClass('smclass')
});

有几个选项，Milind Anantwar 有一个，另一个是使用最初单击的元素，该元素作为 event 参数上的 target 属性传递给事件。您还可以大大简化代码。请注意，您的书签锚点将导致页面弹出到顶部，因此还要将e.preventDefault();添加到您选择的任何解决方案中：

$('.shop-currencies').click(function(e) {
    e.preventDefault();
    $('a', this).removeClass('current');   // remove related anchor current class
    $(e.target).addClass('current');
});

JSFiddle： http://jsfiddle.net/TrueBlueAussie/5Lsuazvt/

这样做的一个缺点是 在 .shop-currencies 内单击，但不在货币链接上，将清除当前选择。因此，您最好以链接为目标：

$('.shop-currencies a').click(function(e) {
    e.preventDefault();
    $(this).siblings().removeClass('current');   // remove related anchor current class
    $(this).addClass('current');
});

JSFiddle： http://jsfiddle.net/TrueBlueAussie/5Lsuazvt/1/

可以减少到一行： 

$('.shop-currencies a').click(function(e) {
    e.preventDefault();
    $(this).addClass('current').siblings().removeClass('current');
});

JSFiddle： http://jsfiddle.net/TrueBlueAussie/5Lsuazvt/2/

把最好的留到最后

最后一点...添加单个委托事件处理程序比附加 4 个单独的处理程序更有效（但几乎不明显）：

$('.shop-currencies').on('click', 'a', function(e) {
    e.preventDefault();
    $(this).addClass('current').siblings().removeClass('current');
});

JSFiddle： http://jsfiddle.net/TrueBlueAussie/5Lsuazvt/3/

最后的想法：

如果您有适当的可用 ID，则链接上的 ID 是不必要的。您可以从 HTML 中删除它们。您在data-currency属性中具有所需的货币值，因此您可以像这样使用它：

$('.shop-currencies').on('click', 'a', function(e) {
    e.preventDefault();
    $(this).addClass('current').siblings().removeClass('current');
    alert($(this).data('currency'));
});

JSFiddle： http://jsfiddle.net/TrueBlueAussie/5Lsuazvt/7/

您的点击，是附加到 li 而不是每个标签$('a').click();也是如此

最短和最快的答案

$('.shop-currencies > a').click(function(){
  $(this).siblings('a').removeClass('current');
  $(this).addClass('current');
});
代码

笔链接在这里，你可以自己玩代码

$('.shop-currencies a').each(function() {
 $(this).on("click", function(event) {
  event.preventDefault();
  var id = $(this).attr('id');
  $('.shop-currencies a').removeClass("current");
  $(this).addClass('current');
  alert(id);
 });
});

http://jsfiddle.net/nj37g5rm/8/

相关文章：