使用动态分配类来显示/隐藏div

Question

我根据api回调数据动态分配div id。例如，我有一堆数据返回，附加到div，我可以为div id分配唯一的IP地址。我可以完全控制我可以分配的内容，即DIV id或class或者其他..

我附上了一个输出结果的示例，希望它能说明我在寻找什么。

我希望能够实现的是当点击端点链接时，它将显示相应的div并隐藏所有其他DIV数据框。端点链接可以点击，我可以添加onclick脚本给他们或其他需要完成

无论我们使用div id还是类名，我都不会讨论。

Answer 1

由于元素是动态生成的，因此最好使用IMO类。

HTML

<div id="endpoint1"> 
    <a href='#' class='clicker'>End Point 1</a>
    <p class='hideThis'>1.1.1.1</p>
</div>
<div id="endpoint2"> 
    <a href='#' class='clicker'>End Point 2</a>
    <p class='hideThis'>1.1.1.1</p>
</div>
<div id="endpoint3"> 
    <a href='#' class='clicker'>End Point 3</a>
    <p class='hideThis'>1.1.1.1</p>
</div>

JavaScript（使用JQuery）

$('.clicker').on('click', function () {
    $('.hideThis').hide();
    $(this).next().show();
});

http://jsfiddle.net/ksvexr40/1

如果您想最初隐藏内容，只需添加以下最初隐藏内容的CSS类。

.hideThis{
    display: none;
}

Answer 2

这应该可以正常工作。

在我正在使用EndPoint的演示中为您的div分配一个类。 onclick函数将使用该类来查找div元素并将其隐藏。然后它将使用this用于触发函数的元素，将该元素中的div作为目标并显示它。

$('.EndPoint').on('click', function () {
    $('.EndPoint').find('div').hide();
    $(this).find('div').show();
});

.EndPoint div{display:none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="EndPoint">
  <a href="#">End Point [0]</a>
    <div><b>IP Address:</b> 216.12.145.20</div>
</div>
<div class="EndPoint">
  <a href="#">End Point [1]</a>
    <div><b>IP Address:</b> 172.230.105.123</div>
</div>
<div class="EndPoint">
  <a href="#">End Point [2]</a>
    <div><b>IP Address:</b> 206.204.52.31</div>
</div>

如果您不明白，请在下面留言，我会尽快回复您。

---

  

修改 - jQuery附加onclick

var IPs=["216.12.145.20","172.230.105.123","206.204.52.31"];
//Foreach value in array
$.each(IPs, function(i,v) {
//Append to id:container
$('#container').append('<div class="EndPoint"><a href="#">End Point ['+i+']</a><div><b>IP Address:</b> '+v+'</div></div>');
});
$('.EndPoint').on('click', function () {
    $('.EndPoint').find('div').hide();
    $(this).find('div').show();
});

.EndPoint div{display:none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container"></div>

我希望这会有所帮助。快乐的编码！