寻找替代更好的方式代码

Question

我有一个图像顶部，我有"N"个链接。每次单击它都应该打开一个小弹出窗口。下面的代码工作正常，但我不想要多余的代码，还有一件事我应该只能打开一个弹出窗口。帮助我更好地编码和

$('.info1').on('click',function()
{
$('.info1-desc').css('display','block');
}); 
$('.info2').on('click',function()
{
$('.info2-desc').css('display','block');
}); 
$('.info3').on('click',function()
{
$('.info3-desc').css('display','block');
});

Answer 1

您可以将所有链接包装在一个容器中，以侦听子项的单击，也可以使用多个选择器：

$('.info1', '.info2', '.info3', '.info4').on('click',function() {
//little concat to get wanted block
var blockName = $(this).get('class');
blockName = '.' + blockName + '-desc';
//first we hide all blocks, then toggle does the checking if is hidden then show, if showed then hide
$('.info1-desc', '.info2-desc', '.info3-desc', '.info4-desc').hide();
$(blockName).toggle();
}

Answer 2

您可以创建两个泛型类，例如.info和.info-desc，并且只有一个事件侦听器。

在香草JS中，它看起来像

var info = document.querySelectorAll(".info");
var infoDesc = document.querySelectorAll(".info-desc");
info.forEach(function(item, index) {
item.addEventListener("click", function() {
for (var i = 0; i < infoDesc.length; i++) {
infoDesc[index].style.display = "block";
}
})
})

Answer 3

这有点符合其他人已经说过的话，但像这样的东西听起来像你想要的，没有循环：

为所有图像(或在我的情况下为div(设置一个通用类"info"，然后为要区分的元素设置特定 ID。

<style> .info-desc{display:none;}</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var lastID = -1;//DEFAULT
$(".info").click(function() {
if($('.info-desc').css('display') == 'none' ){
$('.info-desc').html("<p> Hello from: "+ this.id+"</p>");
$('.info-desc').show(); 
}else if(lastID == this.id){
//alert(lastID);
$('.info-desc').toggle(); //COULD ALSO USE .hide()
}else{
//YOU LIKELY DON'T NEED show(), BECAUSE ONCE HERE ELEMENT IS ALREADY SHOWN
$('.info-desc').show();//BUT FOR COMPLETENESS...
$('.info-desc').html("<p> Hello from: "+ this.id+"</p>");
}
lastID = this.id;
});
});
</script>
<div class="info" id="1" style="border:solid; border-color:red;"> 
<p>Info 1. Click Me</p>
</div>
<br>
<div class="info" id="2" style="border:solid; border-color:red;"> 
<p>Info 2. Click Me</p>
</div>
<br>
<div class="info" id="3" style="border:solid; border-color:red;"> 
<p>Info 3. Click Me</p>
</div>
<br>
<div class="info-desc" style="border:solid; border-color:green;"> 
<p>Alter information using JS based on info-box clicked.</p>
</div>

https://jsfiddle.net/tefw7s3y/3/

根据注释@PAM进行更新：

https://jsfiddle.net/tefw7s3y/4/