Используйте один селектор и проверьте местоположение, где щелкнули с помощью jQuery

0

Мой плагин дублирует узел и добавляет его в указанное место. Он включает в себя возможность удаления дублированного узла.

Пример:

$('#duplicateMe').duplicator( {
      copyToLocation:'#copy_to_here', 
      removeButton:'.removeDuplicateBtn'
    });

Я ищу способ создать проверку внутри моего плагина, чтобы определить, где находится removeButton, когда он щелкнут, и удалить элемент на основе этого.

Мои три варианта использования будут примерно такими:

if ( defaultOptions.removeButton is the item duplicated ){ 
         ... is clicked, remove itself 
       }
if ( defaultOptions.removeButton is the child of item duplicated ){ 
         ... is clicked, remove its parent, in turn removing itself 
       }
if ( defaultOptions.removeButton is NOT the item duplicated && is NOT the child of the item duplicated ){ 
         ... is clicked, remove the last item duplicated 
       }      

Я мог бы создать два отдельных removeButtons. Одна кнопка удаления может находиться за пределами дублированного узла и удалять последний дублированный узел. Вторая кнопка удаления может быть создана внутри дублированного узла и может удалить ее. Тем не менее, я думаю, было бы лучше, если бы один объявленный defaultOptions.removeButton и мой код проверяли, где он находится, когда он был нажат.

Теперь removeButton удаляет последний дублированный узел независимо от того, что имеет этот класс. Это означает, что на какой-нибудь removeButton я нажимаю, он удаляет последний дублированный элемент. Это может быть один дублированный, или он может быть за пределами дублированного. Он удаляет последний элемент.

Некоторое время я ломаю голову над этой логикой. Любые идеи, как я мог бы это реализовать?

Здесь код на работе: duplicator.js при работе в jsfiddle

Если вы нажмете "дублировать прямоугольник" три раза, вы можете щелкнуть любой из них, удалив s, и он удалит последний дублированный элемент. Я хочу, чтобы вы могли щелкнуть удаление рядом с idPrefix_2 и удалить только idPrefix_2. Или, если вы нажмете "удалить последний прямоугольник", он удалит любой синий прямоугольник (последний в строке вверх).

Теги:
removechild
jquery-plugins

2 ответа

0

вы можете получить событие клика, а затем нажать кнопку, нажав кнопку, а затем удалить родительский элемент. Убедитесь, что вы добавили "e" в

$(defaultOptions.removeButton).click(function(e){

var thisBtn = $(e.currentTarget);
thisBtn.parent(".theBlueSquareClass").remove();

пример: http://jsfiddle.net/NLfsw/4/

  • 0
    Я попробовал это, но, похоже, он еще не работал правильно. Кнопка удаления справа перестала работать, потому что код был закомментирован. Я постараюсь немного поиграть с этим и посмотреть, смогу ли я заставить его работать.
0

Когда вы дублируете элемент, добавьте класс, duplicated в новый элемент.

if ($(this).is(".duplicated")) {
    $(this).remove();
} else {
    var dup = $(this).closest(".duplicated");
    if (dup.length) {
        dup.remove();
    } else {
        // remove last duplicated item
    }
}
  • 0
    Эта идея, кажется, работает. Я немного изменил его, чтобы он был таким: $('body').on('click', defaultOptions.removeButton, function(){ if ( $( this ).parent().hasClass('duplicated') ) { $(this).parent().remove(); }else { $(defaultOptions.copyToLocation).children().last().remove(); } }); Однако мне интересно, смогу ли я сделать это, не добавляя новый класс к дублирующемуся элементу.
  • 0
    Вы можете поместить все дублированные элементы в массив, а затем найти его, чтобы увидеть, есть ли в массиве $(this).parent() . Но использовать класс проще.
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню