如何扫描类中的所有元素以查找特定的ID，并为不同的ID重复该过程？

Question

I am quite new to jquery, so please excuse me if I'm doing something stupid:

I have a table where each td belongs to the same class "original" and each one has a unique id.

<table id="main">
        <tr>
            <td style="cursor: pointer" class="original" id="1">
                one
            </td>
            <td style="cursor: pointer" class="original" id="2">
                two
            </td>
        </tr>
        ...
        ...
</table>

I also have a div where all elements are part of a separate class "onclick" and each element has another unique id that is connected to each td from the table.

<div id="second">
        <div class="onclick" id="1click">
            Extra info about 1
            <span class="close" style="cursor: pointer">&times;</span>
        </div>
        <div class="onclick" id="2click">
            Extra info about 2
            <span class="close" style="cursor: pointer">&times;</span>
        </div>
        ...
        ...
</div>

When I click on each individual td, I want to display its corresponding div, so if I click on "1" then "1click" shows up. I currently have this jquery code that successfully does this, but only for the first pair of elements, so it doesn't work for anything beyond id="1" and id="1click".

$(function () {
    $(".original").click(function() {
        var divname = this.id;
        if ($(".onclick").attr("id") == divname + 'click'){
            var clickname= "#" + divname + "click";
            if ($(".hide").css("display") == 'none'){
                $(clickname).toggle();
            }
        }
    }
}

How can I make it so that it searches each element of the table to find a match with each element of the div?

Thanks, and sorry if this is a stupid mistake.

Answer 1

I'm finding it difficult understanding what you're trying to do and would love to help but I need to try and understand it better.

1) You can search using .each() which will scan all the elements and you can use a conditional statement to find the one which is needed: Ie

$(document).ready(function(){
  $("td").each(function() {
    if ($(this).attr("id") == "2") {
        var element = $("#"+$(this).attr("id")+"click");
        // do stuff with element
    }
  })
});

I created a small example which I think helps your scenario on JSFiddle: https://jsfiddle.net/keuhfu36/

$(document).ready(function(){
  $("#i2click").click(function() {
    alert("hello");
  });
  $("td").each(function() {
    if ($(this).attr("id") == "i2") {
      $("#"+$(this).attr("id")+"click").click();
    }
  });
});

2) I recommend you change the div values from id='1' and id='2' like i did in the example to a value which starts with a letter ie id="i1" and id="i2" which makes it a lot less of a pain to work with.

Answer 2

Your script should be like ,

$(".original").click(function() {
  var divId = this.id,
      targetDiv = $("#"+divId+"click");
  $(".onclick:visible").hide();
  targetDiv.show();
});

Answer 3

Try the following code:

 $(function(){ $('.onclick').hide(); $(".original").click(function() { var divname = this.id; $('#'+divname+'click').toggle(); }); }); 

Answer 4

 $(function () { $(".original").click(function() { // Targeted Div Name var divname = "#"+ $(this).attr('id') + "click"; // Toggle the div, as Id would be unique in the page $(divname).toggle(); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id="main"> <tr> <td style="cursor: pointer" class="original" id="1"> one </td> <td style="cursor: pointer" class="original" id="2"> two </td> </tr> </table> <div id="second"> <div class="onclick" id="1click"> Extra info about 1 <span class="close" style="cursor: pointer">&times;</span> </div> <div class="onclick" id="2click"> Extra info about 2 <span class="close" style="cursor: pointer">&times;</span> </div> </div> 

Answer 5

IMHO, you should ditch the IDs altogether and just use the classes along with their indexes to achieve the desired effect much simpler, like this:

 $('#main').on('click', '.original', function() { var index = $('.original').index($(this)); // find the index of the clicked td $('.onclick').hide().eq(index).show(); // hide all the divs then show the one at the same index as the clicked td }) .on('click', '.close', function() { $('.onclick').hide(); // hide all the divs when "close" is clicked }); 

 .onclick { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id="main"> <tr> <td style="cursor: pointer" class="original"> one </td> <td style="cursor: pointer" class="original"> two </td> </tr> ... ... </table> <div id="second"> <div class="onclick"> Extra info about 1 <span class="close" style="cursor: pointer">&times;</span> </div> <div class="onclick"> Extra info about 2 <span class="close" style="cursor: pointer">&times;</span> </div> ... ... </div>