Question

我与jQuery功能发生冲突，即添加到wordpress后端。可以选择将两个这些功能添加到页面中，但是当有两个功能时，第一个功能正常，第二个功能不起作用。他们都必须共享相同的类和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();
$('#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

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

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

这个要求是不合逻辑的。你必须重新修改你的过程。

一些建议可以帮助您 - 您可以利用$(this)了解哪个DOM元素触发了某个事件 - 因此您无需担心ID。

Answer 2

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

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

变为

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

-

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

变为

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

如评论中所述，您不能使用多个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);   
        }
    });

});

Answer 3

这不是超级幻想，但这是你正在寻找的功能吗？

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

当一个页面上的两个相同时，Jquery发生冲突

3 个答案: