如何在单击下一个和上一个按钮时访问 JQuery 中动态生成的 div 元素值

Question

如何在单击下一个和上一个按钮时访问 JQuery 中动态生成的 div 元素值。

我们正在创建包含问题 ID、问题文本和问题选项的动态 div。在单击下一个和上一个按钮时，我们使用 jQuery.

从动态生成的 div 中一次显示一个问题

现在我想在单击下一步按钮时将当前 div 中的当前问题 ID 访问到 jQuery。

请分享关于此的简单示例。

$(document).ready(function(){
    $(".divs div").each(function(e) {
        if (e != 0)
            $(this).hide();
    });
    
    $("#next").click(function(){
        if ($(".divs div:visible").next().length != 0)
            $(".divs div:visible").next().show().prev().hide();
        else {
            $(".divs div:visible").hide();
            $(".divs div:first").show();
        }
        return false;
    })
 .click(function(e) {
      e.preventDefault();       
      var questionPaperDetailsIdjsp     =$("#questionPaperDetailsId").val(); // This not working .
      alert(questionPaperDetailsIdjsp);// This not working .

      });
    
    $("#prev").click(function(){
        if ($(".divs div:visible").prev().length != 0)
            $(".divs div:visible").prev().show().next().hide();
        else {
            $(".divs div:visible").hide();
            $(".divs div:last").show();
        }
        return false;
    });
});


<!-- begin snippet: js hide: false console: true babel: false -->

<div class="divs">
            <%
                ArrayList listQuestionOptions = new ArrayList<String>();    
                int QID = 0;
                AssessmentVO allQuestions = (AssessmentVO) request.getAttribute("stuassessmentVO");
                int Slength = allQuestions.getSections().size();
                for (int j = 0; j < Slength; j++) {                 
                    List<QuestionVO> Qlength = allQuestions.getSections().get(j).getQuestions();
                    for (QuestionVO e : Qlength) {
                        QID++;
                        int NextQuestionId=Qlength.indexOf(e.getId())+1;                    
                        int Olength = e.getOptions().size();
                        for (int i= 0; i < Olength; i++) {
                        listQuestionOptions.add(e.getOptions().get(i).getOption());
                    }   
                    %>
                    <div id="div1" class="div1 div2"> <br><%=e.getQuestionBaseType()%><br><%= QID +e.getDescription()+listQuestionOptions%>
                    <input type="hidden" name="questionPaperDetailsId" id="questionPaperDetailsId" value="<%=e.getId()%>"> 
                    <input type="hidden" id="tag<%=QID%>" value="<%=e.getId()%>"/>
                    <input type="hidden" name="NextQuestionId" id="NextQuestionId" value="<%=NextQuestionId%>"> 
                    </div>
                    <%
                    listQuestionOptions.removeAll(listQuestionOptions);
                        }                   
                } 
                %>
</div>

<a id="next" class="btn btn-success">Next</a>
<a id="prev" class="btn btn-warning">Prev</a>

Answer 1

因为您需要显示先前 div 输入的值，您可以使用 $(".divs div:visible").prev('div').find("[name=questionPaperDetailsId]") 这将找到当前可见的 div 然后使用 prev 获取先前 div 参考最终使用 find 访问您的输入。

演示代码 :

$(document).ready(function() {
  $(".divs div:not(:first)").hide() //hide all divs not first
  $("#next").click(function() {
      if ($(".divs div:visible").next().length != 0)
        $(".divs div:visible").next().show().prev().hide();
      else {
        $(".divs div:visible").hide();
        $(".divs div:first").show();
      }
      return false;
    })
    .click(function(e) {
      e.preventDefault();
      //check if prev length is > 0  (show prev div value : else show current div value)
      var questionPaperDetailsIdjsp = $(".divs div:visible").prev('div').length > 0 ? $(".divs div:visible").prev('div').find("[name=questionPaperDetailsId]").val() : $(".divs div:last").find("[name=questionPaperDetailsId]").val()
      console.log("value =" + questionPaperDetailsIdjsp);
    });

  $("#prev").click(function() {
    if ($(".divs div:visible").prev().length != 0)
      $(".divs div:visible").prev().show().next().hide();
    else {
      $(".divs div:visible").hide();
      $(".divs div:last").show();
    }
    return false;
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="divs">

  <div class="div1 div2"> <br> Soemthing
    <br> Options :
    <input type="hidden" name="questionPaperDetailsId" value="1">
    <input type="hidden" id="tag1" value="1" />
    <input type="hidden" name="NextQuestionId" value="2">
  </div>
  <div class="div1 div2"> <br> Soemthing2
    <br> Options :
    <input type="hidden" name="questionPaperDetailsId" value="2">
    <input type="hidden" id="tag2" value="2" />
    <input type="hidden" name="NextQuestionId" value="3">
  </div>
  <div class="div1 div2"> <br> Soemthing3
    <br> Options :
    <input type="hidden" name="questionPaperDetailsId" value="3">
    <input type="hidden" id="tag3" value="3" />
    <input type="hidden" name="NextQuestionId" value="4">
  </div>

</div>

<a id="next" class="btn btn-success">Next</a>
<a id="prev" class="btn btn-warning">Prev</a>

如何在单击下一个和上一个按钮时访问 JQuery 中动态生成的 div 元素值

How to access dynamically generated div elements value in JQuery on click next and previous button

javascript

jquery

jsp