jQuery单击事件为differents一个标签相同的类名称

-1

我试图使用相同的单击事件使用计数器添加用户。我也有不同的a标签具有相同的类名称。我正在寻找增加一次就在我点击的标签上。谢谢！jQuery单击事件为differents一个标签相同的类名称

<div class="card"> 
    <div class="card-content"> 
    <a href="#" class="sum"><i class="material-icons left">add</i></a> 
    <p class="">Users <a class="clicks">0/20</a></p> 
    </div><br><br> 

    <div class="card-content"> 
    <a href="#" class="sum"><i class="material-icons left">add</i></a> 
    <p class="">Users <a class="clicks">0/20</a></p> 
    </div><br><br> 

    <div class="card-content"> 
    <a href="#" class="sum"><i class="material-icons left">add</i></a> 
    <p class="">Users <a class="clicks">0/20</a></p> 
    </div> 
</div>

var clicks = 0; 
}; 

$(".sum").on("click", function() { 
    clicks += 1; 
    $(".clicks").html(clicks); 
})

来源

2017-04-25 user3380738

你能张贴您的JS代码。目前尚不清楚你想在这里做什么 –

问题是什么？ – kecalace

您可以使用$(this)让你点击了什么元素。然后使用$(this).siblings("p").find("a")来获取我们想要更新的元素。

我希望这是你要找的。

$('.sum').click(function() { 
 
    var count = $(this).siblings("p").find("a").text().split('/'); 
 
    var currentcount = (parseInt(count[0]) + 1); 
 
    var maxcount = count[1]; 
 
    if (maxcount >= currentcount) { 
 
    $(this).siblings("p").find("a").text(currentcount + "/" + maxcount) 
 
    } 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<html> 
 

 
<div class="card"> 
 
    <div class="card-content"> 
 
    <a href="#" class="sum"> <i class="material-icons left">add</i></a> 
 
    <p class=""> 
 
     Users <a class="clicks">0/20</a> 
 
    </p> 
 
    </div> 
 
    <br> 
 
    <br> 
 
    <div class="card-content"> 
 
    <a href="#" class="sum"><i class="material-icons left">add</i></a> 
 
    <p class=""> 
 
     Users <a class="clicks">0/20</a> 
 
    </p> 
 
    </div> 
 
    <br> 
 
    <br> 
 
    <div class="card-content"> 
 
    <a href="#" class="sum"><i class="material-icons left">add</i></a> 
 
    <p class=""> 
 
     Users <a class="clicks">0/20</a> 
 
    </p> 
 
    </div> 
 
</div> 
 

 
</html>

来源

2017-04-25 09:02:40

这是工作伙伴！真的非常感谢！ :) – user3380738

@ user3380738乐于助人 –

要做到这一点，你需要使用this引用被点击的a元素。在那里，您可以使用siblings()和find()遍历DOM以获取要更新其文本的a元素。

为了使每个计数独一无二，您需要分析元素内的文本，然后对其进行增量。试试这个：

$(".sum").on("click", function() { 
 
    var $target = $(this).siblings('p').find('a'); 
 
    var values = $target.text().split('/'); 
 
    
 
    var clicks = parseInt(values[0], 10); 
 
    var limit = parseInt(values[1], 10); 
 
    
 
    if (clicks < limit) { 
 
    clicks++; 
 
    $target.text(clicks + '/' + limit); 
 
    } 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div class="card"> 
 
    <div class="card-content"> 
 
    <a href="#" class="sum"> <i class="material-icons left">add</i></a> 
 
    <p class=""> 
 
     Users <a class="clicks">0/20</a> 
 
    </p> 
 
    </div> 
 
    <br> 
 
    <br> 
 
    <div class="card-content"> 
 
    <a href="#" class="sum"><i class="material-icons left">add</i></a> 
 
    <p class=""> 
 
     Users <a class="clicks">0/20</a> 
 
    </p> 
 
    </div> 
 
    <br> 
 
    <br> 
 
    <div class="card-content"> 
 
    <a href="#" class="sum"><i class="material-icons left">add</i></a> 
 
    <p class=""> 
 
     Users <a class="clicks">0/20</a> 
 
    </p> 
 
    </div> 
 
</div>

来源

2017-04-25 08:58:03

jQuery单击事件为differents一个标签相同的类名称

回答

相关问题