如何将 .toggle 查询仅应用于 div.selected 的子元素？

Question

我正在使用 vis.js with custom styles 和 jquery 行为。

我想写一个 jquery 声明：

Every time .item.range or .item.box is selected, show p.extra within the selected item. Every time anything else on the page is clicked, hide p.extra in the previously selected item.

每次选择 .item.range 或 .item.box 时，它们都会附加样式 .selected，所以我希望我可以用它来定义父级。但是我已经尝试了几个小时才能使它正常工作而没有运气。到目前为止，我已经尝试使用 .toggle、.toggleclass（然后将行为应用于 css 中的新 class）和 .show/hide.

我在vis.js范围内的命名方面受到限制。例如，我不能仅将自定义 class 分配给我想显示隐藏的 p 标签 - 我分配的每个 class 都与 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.

我在搜索答案时运行遇到的问题是，我能找到的所有示例都只与未嵌套的元素有关（我会 post 链接到我尝试过的内容，但是自从这是我的第一个 post 所以不会让我！）。

这是使用 vis.js 时间线时生成的相关 HTML 的片段：

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

这是我文件中 javascript 的片段：

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

我希望我所问的问题对你们中的某个人有意义，并且有一个相对容易的修复方法。

你能帮忙写下我要找的代码吗？

Answer 1

你在找这样的东西吗Fiddle.

在页面加载时隐藏所有额外内容

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

将点击事件绑定到项目和范围

$('.item,.range').click(function(){
    $('.extra').hide();
    $(this).find('.extra').toggle();
});

如何将 .toggle 查询仅应用于 div.selected 的子元素？

How can I apply a .toggle query ONLY to the child element of div.selected?

jquery

show-hide

chap-links-library

vis.js