javascript - 使用jquery获取多个元素的属性值。然后使用它们

标签 javascript jquery html

我有以下 HTML:

  <span class="thumbnav" id="?"><?php get_the_image(); ?></span>
  <span class="thumbnav" id="?"><?php get_the_image(); ?></span>

  <div class="?" style="display:none;">
       Some image, and a bit of text are staring at you.
  </div>

  <div class="?" style="display:none;">
       Some image, and a bit of text are staring at you.
  </div>

我的目标是使用 jQuery 查找每个 <span> 的 ID 值,然后使用该 ID 设置一个 .click() 事件来触发.div> 元素上的show() 函数。

到目前为止我有这个:

var clasid = $(".thumbnav").attr("id");

 $("#" + clasid).click(function () {
 $("." + clasid).show();
});

这有效,但仅适用于第一个<跨度>。

所以我想知道是否有办法让这个脚本适用于所有跨度,我阅读了 jQuery 文档,他们建议使用 .map().each( ),但我一直无法弄清楚。

如果有人能给我提示如何隐藏在显示新 <div> 时处于事件状态的 <div>,那就太好了。

谢谢!

最佳答案

您可以编写类事件并动态访问该元素 id:

$(".thumbnav").click(function(){

$("." + this.id).show(); // this.id will give you clicked element id

})

参见FIDDLE EXAMPLE

关于javascript - 使用jquery获取多个元素的属性值。然后使用它们,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24624149/

相关文章:

javascript - ASP.NET MVC - 更改选项卡 AJAX RenderAction

php - 我尝试在 Codeigniter 中通过 jQuery ajax() 提交表单...但什么也没发生...:(

javascript - 使用 jquery 突出显示页面中的所有逗号

javascript - 如何在 p5.js 上使视频/gif 透明?

javascript - PHP 与 JS : How come PHP operations are moSTLy executed synchronous whilst JS operations are not?

javascript - 如何保持 Date 对象静态并避免更新?

html - 列中的 Bootstrap 中断

javascript - 简单的javascript问题

jquery - 使用 Foundation Framework 为 json 输出设置行/列/类的样式

javascript - 页面完全加载时 Dart 中的回调