一页上两个相同时的Jquery冲突

Question

我与添加到 wordpress 后端的 jQuery 功能发生冲突。可以选择将其中两个功能添加到页面，但是当有两个时，第一个有效，第二个无效。他们都必须共享相同的类和 ID

这是我的小提琴：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);   
    }
  });

});

Answer 1

cmets 中明确指出了这个问题。 ID 在任何给定页面上都必须是唯一的。 id="iconSelector" - 只需将其作为一个类与icon-list 一起添加，它看起来就像class="iconSelector icon-list"。通过使用标准的 jQuery 选择器技术，您应该仍然能够根据需要与 DOM 交互。

他们都必须共享相同的类和 ID

这个要求是不合逻辑的。你必须重新设计你的流程。

在此过程中帮助您的小建议 - 您可以利用 $(this) 了解哪个 DOM 元素触发了事件 - 因此您无需担心 ID。

Answer 2

它不是很花哨，但这就是你要找的功能吗？

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();
});

Answer 3

使用类或元素类型而不是 id。必要时添加类。例如，

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

变成

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

--

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

变成

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

如 cmets 中所述，您不能使用多个 id。

完整示例：

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);   
        }
    });

});