Question

我想将所选按钮文字与点击时的答案文字进行比较。假设这些div元素是动态生成的。

考虑以下HTML代码段示例

＆＃13;

<div class="list-group" id="id1">
  <button >text1</button>
  <button >text2</button>
  <button >text3</button>
  <button >text4</button>
  <button style="display:none;"> answer </button>
  <p> Display the result </p>
</div>
<div class="list-group" id="id2">
  <button >text1</button>
  <button >text2</button>
  <button >text3</button>
  <button >text4</button>
  <button style="display:none;"> answer </button>
  <p> Display the result </p>
</div>

＆＃13;

＆＃13; 我试过这个jQuery

＆＃13;

$("div[id^='id'] button").on('click',function(){
	
var x=$(this).parent(".list-group").find("button:last").text();
var y=$(this).text();
if(x.trim()==y.trim()){
	#dosomething
}
	else{
		#dosomething
	}


});

＆＃13;

非常感谢任何人在这方面的帮助

Answer 1

我做了一点修改。我在名为demo的隐藏按钮控件中添加了HTML属性，以标识其值。

这是我的html标记。

<div class="list-group" id="id1">
  <button >text1</button>
  <button >text2</button>
  <button >text3</button>
  <button >text4</button>
  <button demo style="display:none;">text1</button>
  <p> Display the result </p>
</div>
<div class="list-group" id="id2">
  <button >text1</button>
  <button >text2</button>
  <button >text3</button>
  <button >text4</button>
  <button demo style="display:none;">text3</button>
  <p> Display the result </p>
</div>
<div class="list-group" id="id3">
  <button >text1</button>
  <button >text2</button>
  <button >text3</button>
  <button >text4</button>
  <button demo style="display:none;">text2</button>
  <p> Display the result </p>
</div>
<div class="list-group" id="id4">
  <button >text1</button>
  <button >text2</button>
  <button >text3</button>
  <button >text4</button>
  <button demo style="display:none;">text2</button>
  <p> Display the result </p>
</div>

这是脚本。

$(document).on("click","button",function(){
      var id = $(this).parent('div')[0].id;
      var answer = $( "#"+ id + " button[demo] ").text(); 
      var question = $(this).text();
      if(question.trim()==answer.trim()){
        alert('match')
     }
      else{
         alert('not match')
    }       
});

请参阅演示目的链接：Click here for fiddle Link

我认为这会对你有所帮助。

Answer 2

要分组，您也可以将这些按钮设为ID。像第一组中的第一个获得id1_btn1。在您的jquery代码中，如果是下划线，则检查前面的发件人ID部分。这是你小组的ID。给你的答案一个合适的ID，你的问题应该解决。但是你为什么不给一个额外的课程给出正确答案的按钮？如果按下一个按钮，你只需检查它是否有这个特殊的类，如果有，那么答案是正确的。因此，您不需要隐藏的字段。

Answer 3

＆＃13;

$(document).on("click","button",function(){
      let answer = $(this).parents(".list-group").find("button:last").text();
      let value = $(this).text();
      if(value.trim() == answer.trim()){
       alert("matched");
      }else{
       alert("not matched");
      }
    });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list-group" id="id1">
       <button >text1</button>
       <button >text2</button>
       <button >text3</button>
       <button >text4</button>
       <button style="display:none;">text1</button>
       <p> Display the result </p>
     </div>
     <div class="list-group" id="id2">
       <button >text1</button>
       <button >text2</button>
       <button >text3</button>
       <button >text4</button>
       <button style="display:none;">text3</button>
      <p> Display the result </p>
     </div>

＆＃13;

您可以使用此脚本。

Answer 4

您可以按照以下方式执行此操作：

＆＃13;

$(document).ready(function(){

$('#id1 > button').click(function(){

$('#id1  > p').text($.trim($(this).text())==$.trim($('#id1hiddedbtn').text()))

});

$('#id2 > button').click(function(){

$('#id2  > p').text($.trim($(this).text())==$.trim($('#id2hiddedbtn').text()))

});

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="list-group" id="id1">
<button >text1</button>
 <button >text2</button>
 <button >text3</button>
 <button >answer</button>
 <button id="id1hiddedbtn" style="display:none;"> answer </button>
<p> Display the result </p>
 </div>
 <div class="list-group" id="id2">
<button >answer</button>
 <button >text2</button>
 <button >text3</button>
 <button >text4</button>
 <button id="id2hiddedbtn" style="display:none;"> answer </button>
<p> Display the result </p>
 </div>

＆＃13;

Answer 5

我的回答需要对您的标记稍作修改。由于您真的想要答案的文字值，我已经做出了答案＆＃39;隐藏文本输入字段（也可以帮助避免标记中的错误），并添加了.answer类名称。在这里，我可以访问它的value属性，并将其与单击按钮提供的答案进行比较。我还在您的.result代码中添加了p课程。

因此，您对一个问题块的标记可能如下所示：

<div class="list-group" id="id1">
   <button value="apple" >apple</button>
   <button value="orange" >orange</button>
   <button value="mandarin" >mandarin</button>
   <button value="cake">cake</button>
   <input class="answer" style="display:none;" value="cake" /> 
   <p class="result"> Result: </p>
</div>

答案是正确还是不正确，以下p标记会更新结果。

$('button').on('click', function(e){
     // the clicked buttons text
   let input = $(this).text();
     // the answer to this quiz block
   let answer = $(this).siblings(".answer")[0].value;
     // the result of the users attempt
   let result = input == answer;
     // if true, display 'correct!'
   result ? result = 'correct!'
     // else display 'incorrect!' 
          : result = 'incorrect!';
     // show the result to the user 
     // by selecting the .results sibling
   let display = $(this).siblings('.result')[0];
     // and updating it's innerText value. 
   display.innerText = `Result: ${result}`
});

工作的代码是here

祝你好运，我希望这会有所帮助！

使用jQuery

5 个答案: