0

カスタム スタイルと jquery 動作でvis.jsを使用しています。

次のような jquery ステートメントを書きたいと思います。

.item.rangeまたは.item.boxが選択される たびp.extraに、選択されたアイテム内に表示されます。ページ上の他の何かがクリックされるたびp.extraに、以前に選択された項目で非表示になります。

.item.rangeまたはが選択されるたび.item.boxに style が追加される.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.

答えを探しているときに遭遇した問題は、見つけることができるすべての例がネストされていない要素にのみ関連していることです(私が試したものへのリンクを投稿しますが、それが私の最初の投稿であるため、許可しません!) .

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>

私が尋ねていることがあなたの 1 人にとって理にかなっており、比較的簡単な修正があることを願っています。

私が探しているコードを書くのを手伝ってもらえますか?

4

1 に答える 1

0

このFiddleのようなものを探していますか。

ページの読み込み時に余分なものをすべて非表示にする

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

クリック イベントを項目と範囲にバインドする

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