0

我正在使用带有自定义样式和 jquery 行为的vis.js。

我想写一个 jquery 语句，上面写着：

每次选择.item.range或时.item.box，显示 p.extra在所选项目内。每次单击页面上的其他任何内容时，都隐藏p.extra在先前选择的项目中。

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

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

我在寻找答案时遇到的问题是，我能找到的所有例子都只与未嵌套的元素有关（我会发布我尝试过的链接，但因为这是我的第一篇文章，所以不会让我！） .

以下是使用 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>

我希望我的要求对你们中的一个人有意义，并且有一个相对简单的解决方法。

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

4

1 回答 1

0

你在寻找这样的Fiddle吗？

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

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

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

$('.item,.range').click(function(){
    $('.extra').hide();
    $(this).find('.extra').toggle();
});
于 2015-03-22T19:27:03.987 回答