Question

嗨，我需要这个添加删除课程＆amp;设置nextAll输入的值。

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

＆＃13;

$(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");
    });
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

任何人都可以看到我做错了什么？

fa-check＆amp; fa-circle是很棒的字体

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

Answer 1

动态添加的课程需要event delegation。此外，您还可以缩短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");
});

<强> UPDATED FIDDLE

Answer 2

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

当动态更新元素的类时，请使用Event delegation

基本上我们将事件附加在父项上，该事件在应用程序的整个生命周期中都是持久的，并指定了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>

Fiddle Demo

Answer 3

它只能运行一次，因为你在$(document).ready时添加了事件监听器，那时只有第一个和第三个有fa-circle类，所以这两个元素不会运行fa-check点击事件，即使在点击之后 - 您也会向他们添加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" )
  });
});

希望这很有用。

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

3 个答案:

Fiddle Demo