Question

有一个测验插件，点击“下一步”按钮后会提交答案。我希望在点击答案后触发它。我设法触发了点击，但它点击了所有问题。我如何只点击一次？

我的代码

$(".wpProQuiz_questionListItem").each(function(){
   $(this).find("label").click(function(event){
      $(this).find(".wpProQuiz_questionInput").prop('checked', true);
      $(this).parents().find(".wpProQuiz_button").click();
   });
});

HTML

<ol class="wpProQuiz_list">
   <li class="wpProQuiz_listItem">
      <ul class="wpProQuiz_questionList">
         <li class="wpProQuiz_questionListItem"> <!-- that's the answer -->
            <label>
                <input class="wpProQuiz_questionInput" type="radio" name="question_1_1" value="1"> <img src="http://media-cdn.tripadvisor.com/media/photo-s/01/08/76/63/bahia-de-caraquez.jpg" class="questionimage">                                   
            </label>
            <input name="next" value="Next" class="wpProQuiz_button wpProQuiz_QuestionButton" style="float: right;" type="button">
         </li>
      </ul>
      <input type="button" name="next" value="Next" class="wpProQuiz_button wpProQuiz_QuestionButton" style="float: right;">
   </li>
   <li class="wpProQuiz_listItem">Same code goes here</li>
</ol>

Answer 1

问题是您正在搜索所有父项内的按钮，包括元素<ol class="wpProQuiz_list">，它返回列表中的所有按钮。因此，您必须定义父级，以便找到该按钮。

这么长的故事简短 - 这是修复：

$(this).parents(".wpProQuiz_questionListItem").find(".wpProQuiz_button").click();

一个工作片段

$(".wpProQuiz_questionListItem").each(function(){
   $(this).find("label").click(function(event){
       alert($(this).attr("id"));
      $(this).find(".wpProQuiz_questionInput").prop('checked', true);
      $(this).parents(".wpProQuiz_questionListItem").find(".wpProQuiz_button").click();
     event.preventDefault();
   })
});

$(".wpProQuiz_button").on("click", function() {
    alert($(this).attr("id"));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<ol class="wpProQuiz_list">
   <li class="wpProQuiz_listItem">
      <ul class="wpProQuiz_questionList">
         <li class="wpProQuiz_questionListItem"> <!-- that's the answer -->
            <label id="one">
                <input class="wpProQuiz_questionInput" type="radio" name="question_1_1" value="1"> <img src="http://media-cdn.tripadvisor.com/media/photo-s/01/08/76/63/bahia-de-caraquez.jpg" class="questionimage">                                   
            </label>
            <input id="btn-one" name="next" value="Next" class="wpProQuiz_button wpProQuiz_QuestionButton" style="float: right;" type="button" />

         </li>
      </ul>
      <input id="btn-one-outer" type="button" name="next" value="Next" class="wpProQuiz_button wpProQuiz_QuestionButton" style="float: right;">
   </li>
   <li class="wpProQuiz_listItem">
      <ul class="wpProQuiz_questionList">
         <li class="wpProQuiz_questionListItem"> <!-- that's the answer -->
            <label id="two">
                <input class="wpProQuiz_questionInput" type="radio" name="question_1_1" value="2"> <img src="http://media-cdn.tripadvisor.com/media/photo-s/01/08/76/63/bahia-de-caraquez.jpg" class="questionimage">                                   
            </label>
            <input id="btn-two" name="next" value="Next" class="wpProQuiz_button wpProQuiz_QuestionButton" style="float: right;" type="button" />
         </li>
      </ul>
      <input id="btn-two-outer" type="button" name="next" value="Next" class="wpProQuiz_button wpProQuiz_QuestionButton" style="float: right;">
   </li>
</ol>

Answer 2

我认为event.stopImmediatePropagation();会帮助你

代码示例：

$(".wpProQuiz_questionListItem").each(function(){
   $(this).find("label").click(function(event){
      event.preventDefault();   
      event.stopImmediatePropagation();
      $(this).find(".wpProQuiz_questionInput").prop('checked', true);
      $(this).parents().find(".wpProQuiz_button").trigger('click');
   });
});

触发只需点击一次

2 个答案: