Как добавить переменную js в dom

Я пытаюсь добавить содержимое переменной в div. Переменная для добавления выбирается в соответствии с именем value из <a>, который щелкнут (например, <a value="shops">).Как добавить переменную js в dom

Другими словами, если кто-то нажимает на ссылку и имеет значение shops, эта функция должна добавлять содержимое переменной shopsGrid в div .places.

Пожалуйста, имейте в виду, что я очень младший разработчик. Благодаря!

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 :(

});

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

<!DOCTYPE html> 
 
<html lang="en"> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <meta name="apple-mobile-web-app-capable" content="yes"> 
 
    <meta name="mobile-web-app-capable" content="yes"> 
 
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> 
 
    <meta name="description" content="GUIDE"> 
 
    <meta name="author" content=""> 
 

 
    <title>NYC GUIDE</title> 
 

 
    <!-- Bootstrap core CSS --> 
 
    <link href="css/bootstrap.min.css" rel="stylesheet"> 
 
    <link href="css/custom.css" rel="stylesheet"> 
 

 

 

 

 

 
    </head> 
 

 
    <body> 
 

 

 
    <div class="row" id="navbar"> 
 
     <div class="col-xs-12 col-sm-4"> 
 
     <div class="btn-group btn-group-justified filters"> 
 
      <a href="#" class="labelz label-eat btn active" data-value="Eat">Eat</a> 
 
      <a href="#" class="labelz label-chill btn active" data-value="chill">Chill</a> 
 
      <a href="#" class="labelz label-drink btn active" data-value="drink">Drink</a> 
 
      <a href="#" class="labelz label-fashion btn active" data-value="fashion">Fashion</a> 
 

 
     </div> 
 
     </div> 
 

 
    </div> 
 

 
    <div class="container" id="places-wrapper"> 
 
     <div class="row places all-places"> 
 
     <div class="col-sm-4 place drink eat"> 
 
      <h5 class="tags"><span class="label label-drink">Drink</span><span class="label label-eat">Eat</span></h5> 
 
      <h3>Place 1</h3> 
 

 
     </div> 
 
     <div class="col-sm-4 place fashion"> 
 
      <h5 class="tags"><span class="label label-fashion">Fashion</span></h5> 
 
      <h3>Place 2</h3> 
 
     </div> 
 

 
     <div class="col-sm-4 place fashion"> 
 
      <h5 class="tags"><span class="label label-chilll">chill</span></h5> 
 
      <h3>Place 3</h3> 
 
     </div> 
 

 
    </div> 
 

 

 

 
    <!-- Bootstrap core JavaScript 
 
    ================================================== --> 
 
    <!-- Placed at the end of the document so the pages load faster --> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
    <script src="js/bootstrap.min.js"></script> 
 
    <script src="js/app.js"></script> 
 
    <script async defer 
 
     src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA6eMmlCy8MX-p6Imo0scPRWj6D0MCl1y0&&callback=initMap"> 
 
    </script> 
 
    </body> 
 
</html>

источник

2015-09-19 Sahadeva Hammari

Это должно работать, * при условии, что элементы, которые вы подключаете, существуют по вашему призыву «щелкнуть». (Выполнение этого слишком рано - распространенная ошибка. Например, если ваш 'script' находится в' head' - анти-шаблон, который вы видите слишком часто, то элементы не будут существовать. Поместите 'script' перед закрытием '' тега, если это проблема.) Можете ли вы отправить сообщение [MCVE] (/ help/mcve) (желательно с помощью фрагмента стека) на вопрос, демонстрирующий проблему? –

Боковое примечание: 'значение' не является допустимым атрибутом для элементов' a'. Чтобы помещать произвольные данные в атрибуты, используйте префикс 'data-' (например, 'data-value'). –

Сторона примечания 2: вам не нужно или хотите использовать '' '+ 'before' selection +' Grid'' на вашей строке 'appendTo'. Это безвредно, но бессмысленно. :-) –

Там нет такого атрибута value для якорей. В качестве обходного пути (указано @ T.J. Crowder) вы можете использовать атрибуты HTML5 data-* для хранения произвольных данных до любой элемент DOM.

HTML

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

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

Вы можете получить доступ к произвольному набору данных, используя метод .data() JQuery, а также общий .attr() метода атрибутов.

Примечание: Хотя вы можете использовать .data() здесь, чтобы служить вашей цели получения произвольных заданных данных. Но помните, что если .data() используется для хранения данных в парах ключ-значение (например, $(selector).data('key', 'value')) в DOM, то для его извлечения можно использовать только .data() (то есть $(selector).data('key')). Использование .attr() в этом случае бессмысленно и будет работать только на встроенных HTML5 data-* атрибутов.

Update

Я пытался подражать код в JSfiddle и заметил, что вы используете строку concatination передать переменную JavaScript. Предполагая, что переменная selection имеет в ней значение fashion, тогда selection+'Grid' всегда будет оценивать строку fashionGrid и НЕ переменную fashionGrid.

У меня есть два предложения как способы решения вашей проблемы:

eval() метод Использовать JavaScript для обеспечения соблюдения лечения строки selection + 'Grid' передать фактические переменный.
```
$(eval(selection+'Grid')).appendTo('.places'); 
```
Eval() также обычно медленнее, чем альтернативные варианты, так как он должен вызвать интерпретатор JS, в то время как многие другие конструкции оптимизированы с помощью современных двигателей JS. Существуют более безопасные (и более быстрые!) Альтернативы eval() для обычных случаев использования.

выше цитата из MDN является одной из многих причин, которые препятствуют использованию eval(). В качестве лучшего подхода, избегая eval, вы могли бы сделать использование Javascript объектов вместо:

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 значение в качестве ключа объекта как такового:

$(grid[selection]).appendTo('.places');

Краткий JSfiddle snippet в поможет вам лучше понять два подхода.

источник

2015-09-19 18:32:40

Очень полезные заметки, но в прикрепленном фрагменте переменные не вставляются обратно в dom. Если вы щелкнете, например, ссылку «мода» в фрагменте после правильного удаления всех элементов _except_ для тех, у кого есть класс 'fashion' из DOM, и он удаляет элементы с классом' fashion', вы нажимаете его снова (правильное добавление класса 'inactive' в тег' a'), но когда вы нажмете его в третий раз, он не добавит конкретную переменную 'fashionGrid' обратно в DOM (которая должна содержать html, соответствующий всем' divs 'с классом' fashion'? –

@SahadevaHammari, посмотрите на обновленный ответ. Реальная проблема с вашим кодом заключалась в том, что вы путаете _string_ с оценкой строки как _variable_. –

Ah! Это помогает много [и это работает]! У меня было подозрение, что что-то вроде этого может произойти, и помогает концептуально много. Спасибо! –

-1

изменить эту строку:

$(''+selection+'Grid').appendTo('.places');

$(selection+'Grid').appendTo('.places');

источник

2015-09-19 18:24:51 mad

Как добавить переменную js в dom

ответ

Смежные вопросы