Как я могу применить запрос .toggle ТОЛЬКО к дочернему элементу div.selected?

Я использую vis.js с пользовательские стили и поведение jquery.

Я хочу написать оператор jquery, который говорит:

Каждый раз, когда выбрано .item.range или .item.box, показывать p.extra в выбранном элементе. Каждый раз, когда щелкают что-либо еще на странице, скрывайте p.extra в ранее выбранном элементе.

Каждый раз, когда выбирается .item.range или .item.box, к ним добавляется стиль .selected, поэтому я надеялся, что смогу использовать это для определения родителя. Но я безуспешно пытался заставить это работать несколько часов. До сих пор я пытался сделать это, используя .toggle, .toggleclass (затем применяя поведение к новому классу в css) и .show/hide.

Я ограничен в плане именования в рамках vis.js. Например, я не могу назначить пользовательский класс только для тегов p, которые я хочу показать скрытыми — каждый класс, который я назначаю, используется совместно с 30 другими элементами .item, которые я не хочу перемещать. Вот почему я хочу, чтобы скрипт распознавал, в каком родительском элементе находится тег p.extra.

В своих усилиях я написал неправильные сценарии, такие как:

$( 'p' ).toggle( "slow" ) //makes all p tags on the page toggle about 11 times before stopping.
$( '.extra' ).toggle( "slow" ) //makes all p.extra tags on the page toggle.
$( '.selected','.extra' ).toggle( "slow" ) //makes selected element hide and all .extra elements on the whole page toggle.

Проблема, с которой я столкнулся при поиске ответа, заключается в том, что все примеры, которые я смог найти, относятся только к невложенным элементам (я бы разместил ссылки на то, что я пробовал, но, поскольку это мой первый пост, ТАК не позволит мне!) .

Вот фрагмент соответствующего HTML-кода, сгенерированного при использовании временной шкалы vis.js:

<div class="item range output" style="left: 806.26204476358px; width: 333.050742629105px; top: 75px;"><div class="content" style="left: 0px;">
    <h3> NEH Digital Humanities </h3>
    <p class="extra"> Communication + Place. Finish draft of journal article </p>
    <div class="type"> output </div>    
  </div></div>
  <div class="item range in_process selected" style="left: 437.527293995642px; width: 344.945412008717px; top: 75px;"><div class="content" style="left: 0px;">
    <h3> NEH Digital Humanities </h3>
    <p class="extra"> Guide to Winning. Work with student editor for 30 hours to finish some more 300 online videos. </p>
    <div class="type"> in_process </div>    

And here is a snippet of the javascript in my file:

 <script type="text/javascript">
 // create a handlebars template
 var source = document.getElementById('template-main').innerHTML;
 var template = Handlebars.compile(source);

 // load data via an ajax request. When the data is in, load the timeline
  $.ajax({
  url: 'data/basic.json',
  success: function (data) {
      // hide the "loading..." message
      document.getElementById('loading').style.display = 'none';

      // DOM element where the Timeline will be attached
      var container = document.getElementById('visualization');

      *snip!*

  // Create a Timeline
  var timeline = new vis.Timeline(container, items, groups, options);
  document.getElementById('window1').onclick = function () {
        timeline.setWindow('2015-05-18', '2016-05-17');
    };
    document.getElementById('window2').onclick = function () {
        timeline.setWindow('2016-05-18', '2017-05-16');
    };
    document.getElementById('window3').onclick = function () {
        timeline.setWindow('2017-05-18', '2018-05-16');
    };
    document.getElementById('window4').onclick = function () {
        timeline.setWindow('2018-05-18', '2019-05-16');
    };
    document.onclick = function() {
        var selection = timeline.getSelection();
        timeline.focus(selection);
        //** I think the script using show-hide or toggle needs to go here **//
    };

 *snip!*    

</script>

Я надеюсь, что то, что я прошу, имеет смысл для одного из вас, и что есть относительно простое решение.

Можете ли вы помочь написать код, который я ищу?


person Katherine Hepworth    schedule 22.03.2015    source источник


Ответы (1)


Вы ищете что-то вроде этого Fiddle.

скрыть все лишнее при загрузке страницы

$('.extra').hide();

привязать событие клика к элементу и диапазону

$('.item,.range').click(function(){
    $('.extra').hide();
    $(this).find('.extra').toggle();
});
person wonderbell    schedule 22.03.2015
comment
Да! Это именно то, что я ищу. Благодарю вас! Я попробую это в своем проекте позже сегодня. - person Katherine Hepworth; 23.03.2015