Question

我试图将变量的内容附加到div。要附加的变量是根据点击的value的{{1}}名称选择的（例如<a>）。

换句话说，如果有人点击某个链接并且其值为<a value="shops">，则此函数会将变量shops的内容附加到div shopsGrid。

请记住，我是一名非常初级的开发人员。谢谢！

.places

＆＃13;

var sweetsGrid = $('.places>div.sweets');
var shopsGrid = $('.places>div.shops'); 

// second variable shopsGrid above just to 
// clarify there are lots of these variables written 
// out to select from 

$(".filters>.btn.labelz").click(function(){

  var selection = $(this).attr( "value" );
  $(''+selection+'Grid').appendTo('.places');
  // the line above is the one that doesn't work :(

});

＆＃13;

 var grid = $('.places>div');
 var sweetsGrid = $('.places>div.sweets');
 var shopGrid = $('.places>div.drink');
 var eatGrid = $('.places>div.eat');
 

 $(".filters>.btn.labelz").click(function(){

   var selection = $(this).attr( "data-value" );

   if($('.label-all').hasClass('active')){
     $('.label-all').removeClass('active').addClass('inactive');
     $('.filters>.btn.labelz').removeClass('active').addClass('inactive');
     $(this).addClass('active').removeClass('inactive');
     $('.places>div:not(.'+selection+')').detach();
   } else {
     if($(this).hasClass('active')){
       $(this).removeClass('active').addClass('inactive');
       $('.places>div.'+selection+'').detach();
     } else {
       $(this).addClass('active').removeClass('inactive');
       // THIS IS THE ISSUE!
       $(selection+'Grid').appendTo('.places');

     }
   }

   

   return false;
 });

＆＃13;

Answer 1

锚点没有此类属性value。作为一种解决方法（由@ T.J.Crowder指出），您可以使用HTML5 data-*属性将任意数据存储到任何 DOM元素。

<强> HTML

<a data-value="the-link-value"></a>

<强> JS

$(".filters>.btn.labelz").click(function(){    
     var selection = $(this).data( "value" );
     $(selection+'Grid').appendTo('.places');
});

您可以使用jQuery的.data()方法以及属性的常见.attr()方法访问任意设置数据。

注意：虽然您可以在此处使用.data()来达到获取任意设置数据的目的。但请记住，如果.data()用于将键值对（例如$(selector).data('key', 'value')）中的数据存储到DOM中，则只能使用.data()本身来获取它（即{ {1}}）。在这种情况下使用$(selector).data('key')毫无意义，只能用于嵌入式 HTML5 .attr()属性。

<强> 更新

我尝试在JSfiddle中模拟您的代码，并注意到您使用字符串连接来引用Javascript变量。假设data-*变量中包含值selection，则fashion将始终求值为字符串selection+'Grid'而不是变量fashionGrid。

我有两个建议作为您的问题的解决方法：

使用Javascript的eval()方法强制处理字符串fashionGrid以引用实际变量。
```
selection + 'Grid'
```
eval（）通常也比替代品慢，因为它必须调用JS解释器，而许多其他构造由现代JS引擎优化。对于常见用例，eval（）有更安全（和更快！）的替代方案。

上述引用MDN是阻止使用$(eval(selection+'Grid')).appendTo('.places');的众多原因之一。作为一种避免eval()的更好方法，您可以改为使用Javascript对象：

eval

然后，访问对象键中的特定var grid = {}; grid['fashion'] = $('.fashion'); // add another object in `fashion` key to the grid grid['eat'] = $('.eat'); // add another object in `eat` key to the grid值：

selector

简要JSfiddle snippet，帮助您更好地理解这两种方法。

如何将js变量附加到dom

1 个答案: