jquery - 寻找更好的替代方法代码

标签 jquery html css

<分区>


想要改进这个问题? 更新问题,以便 editing this post 可以用事实和引用来回答它.

关闭 5 年前

我在上面有一张图片,我有“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');

});

最佳答案

您可以将所有链接包装在一个容器中以监听子点击,或者您可以使用多个选择器:

$('.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();
}

关于jquery - 寻找更好的替代方法代码,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50296011/

上一篇:html - css/html 适用于本地文件,不适用于 jsfiddle 或 codepen

下一篇:css - 如何向嵌套的 div 添加悬停事件?

相关文章:

java - 从同一公司网站的不同域获取 cookie

javascript - 只是 .attr() 的一部分

javascript - 运行代码后出现 Uncaught Error

html - Bootstrap : show span with badge class

html - 如何在表格排序器中为 thead 应用 css?

javascript - JQuery ajax 函数中出现意外字符错误

jquery - 强制 jquery mouseover 在子级上时不触发,仅在父级上触发

javascript - div 是否会弄乱文本选择?

javascript - 是否可以让这个 facebook 插件与纯 Phonegap 应用程序一起使用

javascript - 将滚动应用到特定的 DIV