#jquery #html
#jquery #HTML
Вопрос:
У меня есть две вкладки:
- На первой вкладке у меня есть фиксированный список элементов. Каждый элемент может быть добавлен на другую вкладку.
- Вторая вкладка содержит пользовательский список элементов, происходящих из первой вкладки.
- На второй вкладке должны быть только элементы с уникальными идентификаторами
- Не должно быть возможности добавить один и тот же элемент из tab1 в tab2 более одного раза.
Механизм добавления и удаления работает, но проверка, выполняемая для определения того, был ли элемент уже добавлен в tab2, не работает. На данный момент я только предупредил, есть ли элемент или нет.
Если проверка выполняется в другом направлении, проверка наличия элемента в tab1, похоже, работает нормально, что кажется мне странным.
Может кто-нибудь, пожалуйста, предложить улучшения в моем коде?
РЕДАКТИРОВАТЬ: проблема в том, что выполняемая проверка всегда возвращает «Нет». Он нуждается в улучшениях, и у меня нет идей.
HTML:
<div class="demo">
<div id="tabs">
<ul>
<li><a href="#tabs-1">Bands</a></li>
<li><a href="#tabs-2">My bands</a></li>
</ul>
<div id="tabs-1">
<ul id="sortable1" class="bandList">
<li id="6" class="band">
<div class="text">Band 1</div>
<div class="actions">
<a href="#" class="add">Add</a>
<a href="#" class="remove">Remove</a>
</div>
</li>
</ul>
</div>
<div id="tabs-2">
<ul id="sortable2" class="bandList">
<li id="9" class="band">
<div class="text">Band 2</div>
<div class="actions">
<a href="#" class="add">Add</a>
<a href="#" class="remove">Remove</a>
</div>
</li>
</ul>
</div>
</div>
</div>
CSS:
.band .actions a.add{
background:url("../img/edit.png") no-repeat center center;
}
.band .actions a.remove{
background:url("../img/delete.png") no-repeat center center;
}
jQuery:
// Listening for a click on an add button
$('.band a.add').live('click',function(){
var cur_id = $(this).parent().parent().attr("id");
var tmp = ($('#sortable2').has('#' cur_id).length ? "Yes" : "No")
alert(tmp);
$('#sortable2').append($('#' cur_id).clone());
});
// Listening for a click on a delete button (original)
$('.band a.remove').live('click',function(){
var cur_id = $(this).parent().parent().attr("id");
$('#sortable2 > li').remove('#' cur_id);
});
Ответ №1:
Эта строка:
($('#sortable2').has('#' cur_id).length ? "Yes" : "No");
всегда возвращается "No"
. Если вы вернетесь length
, он всегда будет возвращаться Yes
. Я не мог заставить его работать has
, но он возвращал правильный результат children
(я думаю). Однако он будет перемещаться только на один уровень.
Комментарии:
1. Спасибо, изменение .has() на .children() устранило проблему, и все работает так, как я предполагал. Я пробовал .children(), но, возможно, это было как-то по-другому.
Ответ №2:
if (tmp == "No") { $('#sortable2').append($('#' cur_id).clone()) }
Комментарии:
1. Спасибо за ваше предложение, но проблема в том, что тест всегда возвращает «Нет», что означает, что добавление всегда выполняется.