JQuery конфликт, когда два одинаковых на одной странице

У меня конфликт с функцией jQuery, добавляющей к серверу wordpress. Будет возможность добавить две из этих функций на страницу, но когда их два, первый работает, а второй - нет. Они оба имеют одни и те же классы и удостоверения личностиJQuery конфликт, когда два одинаковых на одной странице

Вот моя скрипка: http://jsfiddle.net/yQMvh/39/

HTML

<div class="plugin"> 
<div class="iconDisplay">Display's selected icon</div> 
<span id="selectedIcon" class="selected-icon"></span> 

<button id="selectIconButton">Select Icon</button> 
<div id="iconSelector" class="icon-list"> 
    <div id="iconSearch"> 
     <label for="icon-search">Search Icon: </label> 
     <input type="text" name="icon-search" value=""> 
    </div> 
    <span class="icon-orange"></span> 
    <span class="icon-teal"></span> 
    <span class="icon-icon3"></span> 
    <span class="icon-icon4"></span> 
    <span class="icon-icon5"></span> 
    <span class="icon-icon6"></span> 
    <span class="icon-icon7"></span> 
    <span class="icon-tealer"></span> 
    </div> 
</div> 

<div style="height: 50px"></div> 


<div class="plugin"> 
<div class="iconDisplay">Display's selected icon</div> 
<span id="selectedIcon" class="selected-icon"></span> 

<button id="selectIconButton">Select Icon</button> 
<div id="iconSelector" class="icon-list"> 
    <div id="iconSearch"> 
     <label for="icon-search">Search Icon: </label> 
     <input type="text" name="icon-search" value=""> 
    </div> 
    <span class="icon-orange"></span> 
    <span class="icon-teal"></span> 
    <span class="icon-icon3"></span> 
    <span class="icon-icon4"></span> 
    <span class="icon-icon5"></span> 
    <span class="icon-icon6"></span> 
    <span class="icon-icon7"></span> 
    <span class="icon-tealer"></span> 
    </div> 
</div>

JQuery

var iconVal = $(".icon_field").val(); 
$('#selectedIcon').addClass(iconVal); 

$("#selectIconButton").click(function() { 
    $("#iconSelector").fadeToggle(); 
}); 

$("#iconSelector span").click(function() { 
    selectIcon($(this)); 
}); 

function selectIcon(e) { 
var selection = e.attr('class'); 
$(".icon_field").val(selection); 
$("#iconSelector").hide(); 
$('#selectedIcon').removeClass(); 
$('#selectedIcon').addClass(selection).show(); 
return; 
} 

$('input[name="icon-search"]').keyup(function(){ 
    var sValue = $(this).val().toLowerCase(); 

$.each($('span'), function(){ 
    if($(this).attr('class').indexOf(sValue)===-1){ 
    $(this).fadeOut(0); 
    }else{ 
    $(this).fadeIn(0); 
    } 
    }); 

});

источник

2013-07-30 OGDEV1990

Если вы даете два элемента же "ID" значение, все ставки off, а jQuery просто не будет работать Perly. – Pointy

@ OGDEV1990 - это HTML DOM, который не позволит нескольким элементам иметь один и тот же идентификатор. Никакое количество jQuery или JavaScript не исправит это. –

Я понимаю. Мне удалось исправить некоторые из них, но не все происходит просто. http://jsfiddle.net/yQMvh/43/ – OGDEV1990

Вопрос указывается явно в комментариях. ID должен быть уникальным на любой странице. id="iconSelector" - просто добавьте это как класс вместе с icon-list, чтобы он выглядел как class="iconSelector icon-list". Используя стандартные методы выбора jQuery, вы все равно сможете взаимодействовать с DOM по мере необходимости.

Они оба имеют одни и те же классы и удостоверения личности

Это требование является нелогичным. Вам придется переработать свой процесс.

Небольшой совет, который поможет вам в пути - вы можете использовать $(this), чтобы узнать, какой элемент DOM вызвал событие - так что вам не нужно беспокоиться о ID.

источник

2013-07-30 23:59:46 MaxPowers

Используйте классы или типы элементов, а не идентификаторы. При необходимости добавьте классы. Например,

$('#selectedIcon').addClass(iconVal);

становится

$('.selected-icon').addClass(iconVal);

$("#selectIconButton").click(function() { 
    $("#iconSelector").fadeToggle(); 
});

становится

$("button").click(function() { 
    $(".icon-list").fadeToggle(); 
});

Как уже упоминалось в комментариях вы не можете использовать несколько идентификаторов.

Полный пример:

HTML

<div class="plugin"> 
    <div class="iconDisplay">Display's selected icon</div> 
    <span id="selectedIcon" class="selected-icon"></span> 

    <button id="selectIconButton">Select Icon</button> 
    <div id="iconSelector" class="icon-list"> 
     <div id="iconSearch"> 
      <label for="icon-search">Search Icon: </label> 
      <input type="text" name="icon-search" value=""> 
     </div> 
     <span class="icon-orange"></span> 
     <span class="icon-teal"></span> 
     <span class="icon-icon3"></span> 
     <span class="icon-icon4"></span> 
     <span class="icon-icon5"></span> 
     <span class="icon-icon6"></span> 
     <span class="icon-icon7"></span> 
     <span class="icon-tealer"></span> 
    </div> 
</div> 

<div style="height: 50px"></div> 


    <div class="plugin"> 
    <div class="iconDisplay">Display's selected icon</div> 
    <span id="selectedIcon" class="selected-icon"></span> 

    <button id="selectIconButton">Select Icon</button> 
    <div id="iconSelector" class="icon-list"> 
     <div id="iconSearch"> 
      <label for="icon-search">Search Icon: </label> 
      <input type="text" name="icon-search" value=""> 
     </div> 
     <span class="icon-orange"></span> 
     <span class="icon-teal"></span> 
     <span class="icon-icon3"></span> 
     <span class="icon-icon4"></span> 
     <span class="icon-icon5"></span> 
     <span class="icon-icon6"></span> 
     <span class="icon-icon7"></span> 
     <span class="icon-tealer"></span> 
    </div> 
</div>

Jquery

var iconVal = $(".icon_field").val(); 
$('.selected-icon').addClass(iconVal); 

$("button").click(function() { 
    $(this).siblings(".icon-list").fadeToggle(); 
}); 

$(".icon-list span").click(function() { 
    selectIcon($(this)); 
}); 

function selectIcon(e) { 
    var selection = e.attr('class'); 
    $(".icon_field").val(selection); 
    e.parent().hide(); 
    e.parent().siblings('#selectedIcon').removeClass(); 
    e.parent().siblings('#selectedIcon').addClass(selection).show(); 
    return; 
} 

$('input[name="icon-search"]').keyup(function(){ 
    var sValue = $(this).val().toLowerCase(); 

    $.each($('span'), function(){ 
     if($(this).attr('class').indexOf(sValue)===-1){ 
     $(this).fadeOut(0); 
     }else{ 
     $(this).fadeIn(0); 
     } 
    }); 

});

источник

2013-07-31 00:02:07 webdevduck

Там есть какая-то прогессия, но все же вещи идут вскользь! http://jsfiddle.net/yQMvh/43/ – OGDEV1990

Там все еще используется идентификатор, например $ ("# iconSelector span"), который должен быть $ (". icon-list span"). Есть и другие:) – webdevduck

Попробуйте этот размер - http://jsfiddle.net/j4aS7/7/ - это то, что вам нужно? – webdevduck

Это не супер фантазии, но это функциональность вы ищете?

http://jsfiddle.net/ccarterc1984/RfW69/

CSS:

#iconSelectionBox{ 
    width:250px; 
    height:250px;  
    background-color: gray; 
    position:absolute; 
    display:none;   
} 
#icon1{ 
    background-color:blue;   
} 
#icon2{ 
    background-color:black;   
} 
#icon3{ 
    background-color:green;   
} 
#icon4{ 
    background-color:purple;   
} 
.icon{   
    height:50px; 
    width:50px; 
    float:left; 
}

HTML:

<div id="iconSelectionBox"> 
    <input type="text" id="searchBox" /><br/> 
    <div id="icon1" class="icon"></div> 
    <div id="icon2" class="icon"></div> 
    <div id="icon3" class="icon"></div> 
    <div id="icon4" class="icon"></div> 
</div> 

<button class="selectButton">Select Icon</button> 
<button class="selectButton">Select Icon</button> 

<br/> 
<div id="messageBox"></div>

JQuery:

$('button.selectButton').live('click', function(){ 
    var iconBox = $('#iconSelectionBox'); 
    var buttonPos = $(this).position(); 

    iconBox.show().css('top', buttonPos.top + 100).css('left', buttonPos.left); 
}); 

$('div.icon').live('click', function(event){ 
    var clickedId = event.target.id; 

    $('#messageBox').text("You clicked the icon with id: " + clickedId); 

    $('#iconSelectionBox').hide(); 
});

источник

2013-07-31 00:51:48 carter

JQuery конфликт, когда два одинаковых на одной странице

ответ

Смежные вопросы