14

我见过很多这样的：

<a href="#" id="trigger" data-target="content">Click me</a>
<div id="content">And something will happen here</div>

使用这样的 JS：

$("#trigger").click(function(){
  $("#" + $(this).data("target")).hide();
})

执行此字符串连接以创建选择器，然后用于获取目标元素，这对我来说看起来有点奇怪。Javascript 中是否有更好的模式（可以使用 jQuery）来在一个需要了解另一个目标元素的元素上设置处理程序？

4

6 回答 6

30

为什么要进行字符串连接只是将 id 存储为#

<a href="#" id="trigger" data-target="#content">Click me</a>

$("#trigger").click(function(){
  $($(this).data("target")).hide();
})

同样，您可以存储任何选择器，data-target例如 ex:-.tab1等，这样您就不必在单击或任何事件中再次执行字符串连接。

于 2013-05-07T16:57:00.913 回答
4

你可以简单地使用

$('#content').modal('toggle');

您在代码中的任何位置都可以启动模式显示和隐藏，您甚至可以直接使用“显示”/“隐藏”功能。

我假设您使用的是 Bootstrap 和最新版本的 jQuery 之一。

享受 ！

于 2016-11-29T15:24:17.620 回答
3

为什么不做这样的事情，我认为这是一种更好的方法：

// Set the target
$("#trigger").data('target', $('#content'));

// Get the target
$("#trigger").click(function(){
  $(this).data("target").hide();
})

如果您从后端设置它，我会按照其他人的建议将哈希值与属性值一起包含在内。

<a href="#" id="trigger" data-target="#content">Click me</a>

$("#trigger").click(function(){
     var target = $(this).data("target"); 
     $(target).hide();
})
于 2013-05-07T16:55:08.067 回答
1

您始终可以选择构建选择器，看起来比在选择器内连接字符串要好一些。

$("#trigger").click(function(){
    var selector = "#" + $(this).data("target");
    $(selector).hide();
});

稍微好一点，不知道是不是你要的。

于 2013-05-07T16:56:38.663 回答
0

I would skip the data- completely, thus allowing graceful degradation.

<a href="#content" id="trigger" data-target="">Click me</a>
<div id="content">And something will happen here</div>

with

$("#trigger").click(function(e){
  e.preventDefault();
  $( $(this).attr("href") ).show();
  // note, i'm purposly not using this.href due to a bug in IE that would return the entire href rather than just the hash
})
于 2013-05-07T18:37:23.343 回答
0

$(this).attr('data-target', '#myTarget');

这对我有用

于 2017-08-17T13:19:25.523 回答