jQuery-添加删除类-设置输入值

Question

嗨，我需要这个添加nextAll输入的删除类和设置值。

我可以使它工作，但只能工作一次。 我需要它更像是一个小笨蛋。

 $(document).ready(function () { $(".fa-circle").click(function () { $(this).nextAll('input').first().val('Yes'); $(this).removeClass("fa-circle light_gray").addClass("fa-check green"); }); $(".fa-check").click(function () { $(this).nextAll('input').first().val('No'); $(this).removeClass("fa-check green").addClass("fa-circle light_gray"); }); }); 

 .green { color: #8FCE35; } .light_gray { color: #DDDDDD; } .point { cursor: pointer; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <table class="candi_elections_table" align="center" style="text-align: left;"> <tbody> <tr> <td>198</td> <td> <span class="fa-check font16 green point">CLICK HERE</span> <input id="198" class="" type="text" data-tooltip="" data-load-state="" data-inputmask="" style="" title="" placeholder="" value="" name="198" vk_11844="subscribed"> </td> <td>Something 1</td> </tr> <tr> <td>200</td> <td> <span class="fa-circle font16 light_gray point">CLICK HERE</span> <input id="200" class="" type="text" data-tooltip="" data-load-state="" data-inputmask="" style="" title="" placeholder="" value="" name="200" vk_11844="subscribed"> </td> <td>Something 2</td> </tr> <tr> <td>201</td> <td> <span class="fa-check font16 green point">CLICK HERE</span> <input id="201" class="" type="text" data-tooltip="" data-load-state="" data-inputmask="" style="" title="" placeholder="" value="" name="201" vk_11844="subscribed"> </td> <td>Something 3</td> </tr> <tr> <td>202</td> <td> <span class="fa-circle font16 light_gray point">CLICK HERE</span> <input id="202" class="" type="text" data-tooltip="" data-load-state="" data-inputmask="" style="" title="" placeholder="" value="" name="202" vk_11844="subscribed"> </td> <td>Something 4</td> </tr> </tbody> </table> 

有人看到我在做什么错吗？

• fa-check和fa-circle是很棒的字体

我也在jsfiddle https://jsfiddle.net/9bonuyyn/1/中获得了它

Answer 1

您需要事件委托才能动态添加类。 而且您也可以像下面那样缩短您的js 。

$('.candi_elections_table').on("click", ".fa-circle, .fa-check", function () {
    if ($(this).hasClass('fa-circle')) {
        $(this).nextAll('input').first().val('Yes');
    } else {
        $(this).nextAll('input').first().val('No');
    }
    $(this).toggleClass("fa-check green fa-circle light_gray");
});

更新场

Answer 2

$(SELECTOR)将仅选择DOM中存在且与selector匹配的那些元素。

由于元素的类正在动态更新，请使用Event delegation

基本上，我们将事件附加到父对象上，该事件在应用程序的整个生命周期中都是持久的，并通过指定target-element它们是提到的父target-element来保持。

 $(document).ready(function() { $('.candi_elections_table').on('click', ".fa-circle", function() { $(this).nextAll('input').first().val('Yes'); $(this).removeClass("fa-circle light_gray").addClass("fa-check green"); }); $('.candi_elections_table').on('click', ".fa-check", function() { $(this).nextAll('input').first().val('No'); $(this).removeClass("fa-check green").addClass("fa-circle light_gray"); }); }); 

 .green { color: #8FCE35; } .light_gray { color: #DDDDDD; } .point { cursor: pointer; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <table class="candi_elections_table" align="center" style="text-align: left;"> <tbody> <tr> <td>198</td> <td> <span class="fa-check font16 green point">CLICK HERE</span> <input id="198" class="" type="text" data-tooltip="" data-load-state="" data-inputmask="" style="" title="" placeholder="" value="" name="198" vk_11844="subscribed"> </td> <td>Something 1</td> </tr> <tr> <td>200</td> <td> <span class="fa-circle font16 light_gray point">CLICK HERE</span> <input id="200" class="" type="text" data-tooltip="" data-load-state="" data-inputmask="" style="" title="" placeholder="" value="" name="200" vk_11844="subscribed"> </td> <td>Something 2</td> </tr> <tr> <td>201</td> <td> <span class="fa-check font16 green point">CLICK HERE</span> <input id="201" class="" type="text" data-tooltip="" data-load-state="" data-inputmask="" style="" title="" placeholder="" value="" name="201" vk_11844="subscribed"> </td> <td>Something 3</td> </tr> <tr> <td>202</td> <td> <span class="fa-circle font16 light_gray point">CLICK HERE</span> <input id="202" class="" type="text" data-tooltip="" data-load-state="" data-inputmask="" style="" title="" placeholder="" value="" name="202" vk_11844="subscribed"> </td> <td>Something 4</td> </tr> </tbody> </table> 

小提琴演示

Answer 3

它只能工作一次，因为您在$(document).ready时添加了事件侦听器，当时只有第一个和第三个具有fa-circle类，因此即使单击后，这两个元素也不会运行fa-check click事件。您向他们添加fa-check类。 第二和第四相同。

请尝试以下方法：

$(document).ready(function(){
    $(".fa-circle, .fa-check").click(function(){
    var text = $(this).hasClass('fa-circle') ? 'Yes':'No';
    $(this).nextAll('input').first().val(text);
    $(this).toggleClass( "fa-circle light_gray fa-check green" )
  });
});

希望这是有用的。