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

Rajashree Saste

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

我们正在创建包含问题ID,问题文本和问题选项的动态div。然后单击“下一个”和“上一个”按钮,我们一次使用jQuery从动态生成的div中显示一个问题。

现在,我想在单击下一步按钮时从当前div访问当前问题ID。

请分享简单的例子。

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

斯瓦蒂

当您需要显示以前的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>

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何访问ArrayList中的上一个/下一个元素?

来自分类Dev

如何在angularjs ng-repeat中访问上一个和下一个项目

来自分类Dev

分页-jQuery DataTables中的上一个和下一个大小按钮

来自分类Dev

如何创建遍历数组中URL的jQuery上一个和下一个按钮(分页)

来自分类Dev

使用下一个和上一个按钮浏览多个div

来自分类Dev

单击时通过下一个/上一个按钮选择元素

来自分类Dev

如何在video.js中添加上一个和下一个按钮

来自分类Dev

如何在JQuery幻灯片代码中添加上一个和下一个按钮

来自分类Dev

如何在某个包装中隐藏上一个和下一个兄弟姐妹的内容,而不是在jQuery中隐藏单击的div的内容?

来自分类Dev

如何在Python枚举中优雅地找到下一个和上一个值?

来自分类Dev

如何确保在Flexslider动画上单击上一个下一个按钮时重新启动?

来自分类Dev

如何在React中检查上一个和下一个值的差异?

来自分类Dev

如何在滑块中不显示上一个按钮和下一个按钮?

来自分类Dev

如何获取数组中的下一个和上一个元素,Ruby

来自分类Dev

使用React Hooks单击上一个/下一个按钮时在div之间切换

来自分类Dev

通过单击javascript 3值中的按钮将日期更改为下一个/上一个

来自分类Dev

当我单击“下一个/上一个”按钮时,jQuery DatePicker消失

来自分类Dev

如何使用按钮调用数组中的下一个和上一个值?

来自分类Dev

JQuery Full Calendar:“上一个”和“下一个”按钮上的某些单击将被忽略

来自分类Dev

默认情况下如何在jQuery的fancybox 2中带上一个和下一个按钮?

来自分类Dev

如何创建遍历数组中URL的jquery上一个和下一个按钮(分页)

来自分类Dev

使用下一个和上一个按钮循环遍历li元素

来自分类Dev

如何在单击按钮时从微调器中获取下一个/上一个项目?

来自分类Dev

如何在JQuery幻灯片代码中添加上一个和下一个按钮

来自分类Dev

如何在Python枚举中优雅地找到下一个和上一个值?

来自分类Dev

当我单击“下一个/上一个”按钮时,如何在jQuery UI日期选择器中制作月份变化的动画

来自分类Dev

单击角度 2 中的上一个和下一个按钮时的下拉值更改

来自分类Dev

如何在按钮单击下一个活动时隐藏或显示元素

来自分类Dev

如何仅通过单击下一个和上一个按钮来更改轮播的内容?

Related 相关文章

  1. 1

    如何访问ArrayList中的上一个/下一个元素?

  2. 2

    如何在angularjs ng-repeat中访问上一个和下一个项目

  3. 3

    分页-jQuery DataTables中的上一个和下一个大小按钮

  4. 4

    如何创建遍历数组中URL的jQuery上一个和下一个按钮(分页)

  5. 5

    使用下一个和上一个按钮浏览多个div

  6. 6

    单击时通过下一个/上一个按钮选择元素

  7. 7

    如何在video.js中添加上一个和下一个按钮

  8. 8

    如何在JQuery幻灯片代码中添加上一个和下一个按钮

  9. 9

    如何在某个包装中隐藏上一个和下一个兄弟姐妹的内容,而不是在jQuery中隐藏单击的div的内容?

  10. 10

    如何在Python枚举中优雅地找到下一个和上一个值?

  11. 11

    如何确保在Flexslider动画上单击上一个下一个按钮时重新启动?

  12. 12

    如何在React中检查上一个和下一个值的差异?

  13. 13

    如何在滑块中不显示上一个按钮和下一个按钮?

  14. 14

    如何获取数组中的下一个和上一个元素,Ruby

  15. 15

    使用React Hooks单击上一个/下一个按钮时在div之间切换

  16. 16

    通过单击javascript 3值中的按钮将日期更改为下一个/上一个

  17. 17

    当我单击“下一个/上一个”按钮时,jQuery DatePicker消失

  18. 18

    如何使用按钮调用数组中的下一个和上一个值?

  19. 19

    JQuery Full Calendar:“上一个”和“下一个”按钮上的某些单击将被忽略

  20. 20

    默认情况下如何在jQuery的fancybox 2中带上一个和下一个按钮?

  21. 21

    如何创建遍历数组中URL的jquery上一个和下一个按钮(分页)

  22. 22

    使用下一个和上一个按钮循环遍历li元素

  23. 23

    如何在单击按钮时从微调器中获取下一个/上一个项目?

  24. 24

    如何在JQuery幻灯片代码中添加上一个和下一个按钮

  25. 25

    如何在Python枚举中优雅地找到下一个和上一个值?

  26. 26

    当我单击“下一个/上一个”按钮时,如何在jQuery UI日期选择器中制作月份变化的动画

  27. 27

    单击角度 2 中的上一个和下一个按钮时的下拉值更改

  28. 28

    如何在按钮单击下一个活动时隐藏或显示元素

  29. 29

    如何仅通过单击下一个和上一个按钮来更改轮播的内容?

热门标签

归档