Question

我试图根据表中单击的链接显示隐藏的DIV，它显示有关该特定链接单击的关联信息。不同的链接单击应显示相同的表，但是仅与该链接单击相关的信息不同。

我尝试利用一些jquery。一切正常，例如显示div并隐藏其后的内容。但这只会显示第一个内容，如果我单击第二个链接，则不会显示第二个内容。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
  $(document).ready(
    function() {
      $(".accept").click(function() {
        $(".hidden_div").show("slow");
        $("#link").hide("slow");
        $($this).show("slow");
      });

      $("#close_tab_button").click(function() {
        $(".hidden_div").hide("slow");
        $("#link").show("slow");
        $($this).hide("slow");

      });
    });
</script>
</head>

<body>
  <div id="link" <p>Link Table and DIV</p><br>

    <div style="width: 100%; height: 100%">
      <table>
        <tr class="accept">
          <td><a href="#" value="link_1">Link 1</td>
		    	<td>Link 1 Description</td>
		    </tr>
		    <tr class="accept">
			    <td><a href="#" value="link_2">Link 2</td>
			    <td>Link 2 Description</td>
		    </tr>
		    </table>
				
    </div>
    </div>
    <div class="hidden_div">
	    <div class="hidden_div_container">
	    	<div class="hidden_div_close"><div id="close_tab"><a href=""><img id="close_tab_button" src="../Media/close_button.png" width="20"></a></div>
  </div>
  <div class="hidden_div_content">
    <div id="link_1"> blah blah blah</div>
    <div id="link_2"> blah blah blah blah</div>
  </div>
  </div>
  </div>

Answer 1

@NewToJS的小提琴似乎起作用，但是如果您只想显示该链接的相应div，请单击。你应该尝试

$(".accept").click(function() {
    $(".hidden_div").show("slow");
    $("#link").hide("slow");
    if($(this).hasClass("link_1")){
        $("#link_1").show("slow");
    }
    if($(this).hasClass("link_2")){
        $("#link_2").show("slow");
    }
});

然后将类添加到链接行中，例如

<tr class="accept link_1">
<tr class="accept link_2">

这是工作中的Fiddle

希望有帮助。

编辑：我将value的{{1}}属性更改为anchor，因此可以在jQuery中对其进行访问。当链接具有大量选项时，这里是Fiddle。

Answer 2

您可以创建一个全局对象来放置value：description。例如

const data = [{link_1:'LINK 1 Description'},{link_2: 'LINK 2 Description'}];

当您在行中单击时，使用JS可以获得当前链接和其他变量。

在您的视图中，创建一个通用结构以显示说明，并使用JS的appendToHtml值

document.getElementById('#whatever').innetHTML = data.currentValue

如何基于链接单击显示相同的DIV容器和不同的内容

2 个答案: