Question

我正在使用vis.js custom styles和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.

我在搜索答案时遇到的问题是，我能找到的所有例子都只涉及到未经证实的元素（我会发布链接到我尝试的内容，但因为这是我的第一篇文章，所以赢了＃39;让我！）。

以下是使用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的子元素？

1 个答案: