根据ID获取特定的Div内容 [英] Get Specific Div Content Based On Id

问题描述

我正在尝试根据ID获取特定的div内容.作为示例，我在前端使用div一一列出以下内容:

I am trying to get specific div content based on id. As an example, I've the following contents one by one in the front-end using div:

Question 1

用户单击下一步，然后将显示div中的第二个问题，依此类推.当没有剩余的问题并且用户再次单击下一步时，它将显示问题编号，如下所示:说出最后三个问题，前端将出现一个类似的列表

User clicks next, then the second question within the div and so on will come up. When there will be no questions left and user clicks next again, it'll show the question numbers as follows: Say for three questions at the end, a similar list will appear in the front-end

Question 1 Question 2 Question 3 

当用户单击任何一个问题时，应将用户带到该特定问题.请注意，这不是锚点，必须使用div部分完成.这是我尝试使用的小提琴- JS小提琴

When user will click in any of the question, it should take the user to that specific question. Notice that, this isn't an anchor and it has to be done using the div section. Here's a fiddle that I was trying to work with - JS Fiddle

在代码中，我有一个div区域，该区域最初保持隐藏状态，尤其是最后出现的问题编号.因此它到达了最后一个问题，它启用了该div区域并显示了问题编号.这是代码段:

In the code, I've a div area that remains hidden initially, specifically the question numbers that'll appear at the end. So it reaches the last question, it enables that div area and shows the question number. Here is the code snippet:

$(".getVal").click(function () {
    var $container = $('.divs').children().eq();

    var id = $(".h2Val").text().trim();
    var id2 = $(this).attr("data-id"); //Assigned data-id to match the question id
    
    if (id.match(id2)) { //When match found, trying to enable the div with question
         $(".hideSection1").show();
         $(".hideSection2").hide();
    }
});

现在我要面对的问题是，实际上是否有可能让那个特定的div出现问题，因为这不是锚点或href或解决此问题的更好方法?在我的情况下，它显示的是问题，但最后一个是问题，但单击问题编号即可获得相应的问题.

Now the problem I face, is it actually possible to get that specific div with question as this isn't an anchor or href or any better way to overcome this issue? In my case, it shows the question but the last one but required to obtain corresponding questions clicking on question numerbers.

代码段:

$(document).ready(function() {
  $(".hideSection2").hide();

  divs = $(".divs").children();
  divs.each(function(e) {
    if (e != 0)
      $(this).hide();
  });

  var index = 0,
    divs = $(".divs").children();

  //declare
  var indexes = 0;
  $(".button").click(function() {
    //get div length
    var lengths = divs.length;
    //checking if btn clicked is next
    if ($(this).is('#next')) {
      //checking if value if less then length
      if ((indexes < (lengths - 1))) {
        //increment
        //remove 
        $(this).prop('disabled', false);
        $(this).css("background-color", "blue");
        console.log("in  - " + indexes)
        //show div
        index = (index + 1) % divs.length;
        divs.eq(index).show().siblings().hide();
        //to show result
        show_data1(indexes);
        indexes++;
      } else {
        $(".hideSection2").show();
        $(".hideSection1").hide();
        console.log("i am in last question reached")
        $(this).prop('disabled', true); //disable
        $(this).css("background-color", "#00FFFF"); //chnagecolor

        $("#prev").css("background-color", "blue");

      }
    } else if ($(this).is('#prev')) {
      //chcking id value is not 0
      if (indexes != 0) {
        //remove 
        $(this).prop('disabled', false);
        $(this).css("background-color", "blue");
        indexes--;
        //show
        index = (index - 1) % divs.length;
        divs.eq(index).show().siblings().hide();
        console.log("back  - " + indexes)
        show_data1(indexes); //show result
      } else {
        console.log("no back question")
        //disabled
        $(this).prop('disabled', true);
        //add color chnage
        $(this).css("background-color", "#00FFFF");
        $("#next").css("background-color", "blue");

      }
    }
  });

  function show_data1(indexes1) {
    //pass indexes value to get required div
    var $container = $('.divs').children().eq(indexes1);

    var id = $container.find(".h2Val").text().trim();
    var $checked = $container.find('.cbCheck:checked');
    var values = $checked.map(function() {
      return this.value
    }).get();
    //console.clear()
    console.log('ID: ' + id + ' has ' + $checked.length + ' checked');
    console.log('Values: ', values.join())

  }

  $(".getVal").click(function() {
    var $container = $('.divs').children().eq();

    var id = $(".h2Val").text().trim();
    var id2 = $(this).attr("data-id");
    //alert($(this).attr("data-id"));

    if (id.match(id2)) {
      //alert(id + $(this).attr("data-id"));
      $(".hideSection1").show();
      $(".hideSection2").hide();
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="hideSection1">
  <div class="divs">
    <div class="heading">
      <div class="h2Val">1</div>
      <div>What's the capital of England?</div>
      <div class="heading2">
        <div><input type="checkbox" id="val1" class="cbCheck" name="val1" value="London" />London</div>
      </div>
      <div class="heading2">
        <div><input type="checkbox" id="val2" class="cbCheck" name="val2" value="New York" />New York</div>
      </div>
    </div>

    <div class="heading">
      <div class="h2Val">2</div>
      <div>Who invented computer?</div>
      <div class="heading2">
        <div><input type="checkbox" id="val3" class="cbCheck" name="val3" value="Thomas Edison" />Thomas Edison</div>
      </div>
      <div class="heading2">
        <div><input type="checkbox" id="val4" class="cbCheck" name="val4" value="Charles Babbage" />Charles Babbage</div>
      </div>
      <div class="heading2">
        <div><input type="checkbox" id="val5" class="cbCheck" name="val5" value="Sir Isaac Newton" />Sir Isaac Newton</div>
      </div>
    </div>
    <div class="heading">
      <div class="h2Val">3</div>
      <div>Who invented computehttr?</div>
      <div class="heading2">
        <div><input type="checkbox" class="cbCheck" name="val3" value="Thomas Edison" />Thomas Edison</div>
      </div>
      <div class="heading2">
        <div><input type="checkbox" class="cbCheck" name="val4" value="Charles Babbage" />Charles Babbage</div>
      </div>
    </div>
  </div>

  <a class="button" id="prev">Previous</a>
  <a class="button" id="next">Next</a>
</div>

<div class="hideSection2">
  <div class="container">
    <div class="row">
      <div class="divs2">
        <a class="getVal" data-id="1">1</a>
        <a class="getVal" data-id="2">2</a>
        <a class="getVal" data-id="3">3</a>
      </div>
    </div>
  </div>
</div>

推荐答案

您无需比较if (id.match(id2)) {，因为您的问题按顺序显示，因此我们可以使用divs.eq(id)..仅显示用户点击的div要显示答案，我们可以将此id值传递给show_data1(indexes1)，以在单击问题时也显示答案.此外，我从id值中减去了一个，因为div索引将从0开始.

You don't need to compare if (id.match(id2)) { because your questions are shown in sequence so we can use divs.eq(id).. to show only div which is clicked by user and to show answer we can pass this id value to show_data1(indexes1) to show answer as well when question is clicked.Also , i have subtract one from the id value because div index will start from 0.

演示代码:

$(document).ready(function() {
  $(".hideSection2").hide();

  divs = $(".divs").children();
  divs.each(function(e) {
    if (e != 0)
      $(this).hide();
  });

  var index = 0,
    divs = $(".divs").children();

  //declare
  var indexes = 0;
  $(".button").click(function() {
    //get div length
    var lengths = divs.length;
    //checking if btn clicked is next
    if ($(this).is('#next')) {
      //checking if value if less then length
      if ((indexes < (lengths - 1))) {
        //increment
        //remove 
        $(this).prop('disabled', false);
        $(this).css("background-color", "blue");
        console.log("in  - " + indexes)
        //show div
        index = (index + 1) % divs.length;
        divs.eq(index).show().siblings().hide();
        //to show result
        show_data1(indexes);
        indexes++;
      } else {
        $(".hideSection2").show();
        $(".hideSection1").hide();
        console.log("i am in last question reached")
        $(this).prop('disabled', true); //disable
        $(this).css("background-color", "#00FFFF"); //chnagecolor

        $("#prev").css("background-color", "blue");

      }
    } else if ($(this).is('#prev')) {
      //chcking id value is not 0
      if (indexes != 0) {
        //remove 
        $(this).prop('disabled', false);
        $(this).css("background-color", "blue");
        indexes--;
        //show
        index = (index - 1) % divs.length;
        divs.eq(index).show().siblings().hide();
        console.log("back  - " + indexes)
        show_data1(indexes); //show result
      } else {
        console.log("no back question")
        //disabled
        $(this).prop('disabled', true);
        //add color chnage
        $(this).css("background-color", "#00FFFF");
        $("#next").css("background-color", "blue");

      }
    }
  });

  function show_data1(indexes1) {
    //pass indexes value to get required div
    var $container = $('.divs').children().eq(indexes1);

    var id = $container.find(".h2Val").text().trim();
    var $checked = $container.find('.cbCheck:checked');
    var values = $checked.map(function() {
      return this.value
    }).get();
    //console.clear()
    console.log('ID: ' + id + ' has ' + $checked.length + ' checked');
    console.log('Values: ', values.join())

  }

  $(".getVal").click(function() {
//get id
  var id = $(this).attr("data-id");
    $(".hideSection1").show();
    $(".hideSection2").hide();
    //subtract one , because div starts from 0 ,1..etc
    var new_id= id - 1;
   //show div
    divs.eq(new_id).show().siblings().hide();
    index = new_id; //settting value of index again for click of next button
    indexes = new_id; //setting value for index
    show_data1(indexes) //show answer as well when user click of question no.

  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="hideSection1">
  <div class="divs">
    <div class="heading">
      <div class="h2Val">1</div>
      <div>What's the capital of England?</div>
      <div class="heading2">
        <div><input type="checkbox" id="val1" class="cbCheck" name="val1" value="London" />London</div>
      </div>
      <div class="heading2">
        <div><input type="checkbox" id="val2" class="cbCheck" name="val2" value="New York" />New York</div>
      </div>
    </div>

    <div class="heading">
      <div class="h2Val">2</div>
      <div>Who invented computer?</div>
      <div class="heading2">
        <div><input type="checkbox" id="val3" class="cbCheck" name="val3" value="Thomas Edison" />Thomas Edison</div>
      </div>
      <div class="heading2">
        <div><input type="checkbox" id="val4" class="cbCheck" name="val4" value="Charles Babbage" />Charles Babbage</div>
      </div>
      <div class="heading2">
        <div><input type="checkbox" id="val5" class="cbCheck" name="val5" value="Sir Isaac Newton" />Sir Isaac Newton</div>
      </div>
    </div>
    <div class="heading">
      <div class="h2Val">3</div>
      <div>Who invented computehttr?</div>
      <div class="heading2">
        <div><input type="checkbox" class="cbCheck" name="val3" value="Thomas Edison" />Thomas Edison</div>
      </div>
      <div class="heading2">
        <div><input type="checkbox" class="cbCheck" name="val4" value="Charles Babbage" />Charles Babbage</div>
      </div>
    </div>
  </div>

  <a class="button" id="prev">Previous</a>
  <a class="button" id="next">Next</a>
</div>

<div class="hideSection2">
  <div class="container">
    <div class="row">
      <div class="divs2">
        <a class="getVal" data-id="1">1</a>
        <a class="getVal" data-id="2">2</a>
        <a class="getVal" data-id="3">3</a>
      </div>
    </div>
  </div>
</div>

这篇关于根据ID获取特定的Div内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！