Я использую 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>
Я надеюсь, что то, что я прошу, имеет смысл для одного из вас, и что есть относительно простое решение.
Можете ли вы помочь написать код, который я ищу?