jQuery '#' + data("target") 模式

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/16424502/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 17:05:58  来源:igfitidea点击:

jQuery '#' + data("target") pattern

javascriptjquery

提问by spike

I've seen this a bunch:

我已经看到了一堆:

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

With JS like this:

像这样的JS:

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

It looks a little weird to me to be doing this string concatenation to create selectors which are then used to get the target element. Is there a better pattern in Javascript (with jQuery available) for setting up handlers on one element which need to know about another target element?

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

回答by PSL

Why you do string concatenation just store the id with #

为什么你做字符串连接只是存储 id #

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

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

Similarly you can store any selectors as is in data-targetsay for ex:- .tab1etc so that you do not have to perform string concatenation again inside the click or any event.

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

回答by Pini Cheyni

You can simply use

你可以简单地使用

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

Any where in you're code to initiate the modal show and hide, You can use even "show"/"hide" functionality directly.

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

I assume you're using Bootstrap and one of the latest versions of jQuery.

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

Enjoy !

享受 !

回答by Gabe

Why not do something like this, a much better approach in my opinion:

为什么不做这样的事情,我认为这是一个更好的方法:

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

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

If you're setting it from the backend, I would include the hash with the attribute value as others have suggested.

如果您是从后端设置它,我会像其他人建议的那样包含带有属性值的哈希值。

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

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

回答by tymeJV

You always have the option to build the selector, looks a bit nicer than concatenating the string inside the selector.

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

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

A little nicer, not sure if it's what you're looking for.

好一点,不知道是不是你要的。

回答by Kevin B

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
})

回答by Sayantan Dey

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

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

this worked for me

这对我有用