1

我与添加到 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);   
    }
  });

});
4

3 回答 3

0

使用类或元素类型而不是 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>

查询

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-31T00:02:07.153 回答
0

它不是超级花哨,但这是您正在寻找的功能吗?

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-31T00:51:48.160 回答
0

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

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

这个要求是不合逻辑的。您将不得不重新设计您的流程。

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

于 2013-07-30T23:59:46.300 回答