Question

我有一个标签和一个复选框。单击标签时，会发生所需的操作。当我单击启用或禁用时，该复选框不执行任何操作。我已经在输入的内部和外部移动了标签，似乎没有任何效果。所有代码都在下面。

home_filters.html.erb：

<span id="listing-search-sentence-transit" style="display: none;">I'd like to live near <a tabindex="0" class="button btn-transparent" id="listing-transit-selector" role="button" data-toggle="popover">these trains.</a></span>
<span id="listing-search-sentence-fee" style="display: none;">Only find me <a tabindex="0" class="button btn-transparent" id="listing-no-fee-selector" role="button" <%= f.check_box :no_fee %> <%= f.label :no_fee, "no fee listings." %> </a></span>
<span id="listing-search-sentence-pets" style="display: none;"> <a tabindex="0" class="button btn-transparent" id="listing-pets-selector" role="button" data-toggle="popover"><%= f.label :pets %></a></span>


<div id="test-content" class="hide">
  <div class="container-fluid">
    <label id="label-sentence-fee" class="general-text-label" for="sentence-fee"><input type="checkbox" name="label-sentence-fee" id="sentence-fee"> No Fee Listing</label><br>
    <label id="label-sentence-transit" class="general-text-label" for="sentence-transit"><input type="checkbox" name="label-sentence-transit" id="sentence-transit"> Transit</label><br>
    <label id="label-sentence-pets" class="general-text-label" for="sentence-pets"><input type="checkbox" name="label-sentence-pets" id="sentence-pets"> Pets</label><br>
  </div>
</div>

.js文件：

$("#sentence-fee").click(function(feeEvent){
  feeEvent.stopPropagation();
  $("#listing-search-sentence-fee").toggle();
  $("input#sentence-fee").prop('checked', true);
});

$("#sentence-transit").click(function(transitEvent){
  transitEvent.stopPropagation();
  $("#listing-search-sentence-transit").toggle();
  $("input#sentence-transit").prop('checked', true);
});

$("#sentence-pets").click(function(petsEvent){
  petsEvent.stopPropagation();
  $("#listing-search-sentence-pets").toggle();
  $("input#sentence-pets").prop('checked', true);
});

Answer 1

如果您有类似以下示例的代码，那么应该适合您：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<span id="listing-search-sentence-transit" style="display: none;">I'd like to live near <a tabindex="0" class="button btn-transparent" id="listing-transit-selector" role="button" data-toggle="popover">these trains.</a></span>
<span id="listing-search-sentence-fee" style="display: none;">Only find me <a tabindex="0" class="button btn-transparent" id="listing-no-fee-selector" role="button" <%= f.check_box :no_fee %> <%= f.label :no_fee, "no fee listings." %> </a></span>
<span id="listing-search-sentence-pets" style="display: none;"> <a tabindex="0" class="button btn-transparent" id="listing-pets-selector" role="button" data-toggle="popover"><%= f.label :pets %></a></span>


<div id="test-content" class="hide">
  <div class="container-fluid">
    <label id="label-sentence-fee" class="general-text-label" for="sentence-fee"><input type="checkbox" name="label-sentence-fee" id="sentence-fee"> No Fee Listing</label><br>
    <label id="label-sentence-transit" class="general-text-label" for="sentence-transit"><input type="checkbox" name="label-sentence-transit" id="sentence-transit"> Transit</label><br>
    <label id="label-sentence-pets" class="general-text-label" for="sentence-pets"><input type="checkbox" name="label-sentence-pets" id="sentence-pets"> Pets</label><br>
  </div>
</div>


<script>
  $(document).ready(function() {
    $("#sentence-fee").click(function(feeEvent) {
      $("#listing-search-sentence-fee").toggle();
    });

    $("#sentence-transit").click(function(transitEvent) {
      $("#listing-search-sentence-transit").toggle();
    });

    $("#sentence-pets").click(function(petsEvent) {
      $("#listing-search-sentence-pets").toggle();
    });
  });
</script>

Answer 2

总是得到父元素事件，如果有的话。

复选框不起作用，但标签有效

2 个答案: