Question

<select id="example" name="example" multiple="multiple"> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> <option value="4">Option 4</option> <option value="5">Option 5</option> </select>

<span class="click" id="1">one </span>
<span class="click" id="2">two </span>
<span class="click" id="3">three </span>
<span class="click" id="4">four </span>

$('.click').click( function() {
    $(this).css('background-color', 'red');
    $('#example').val($(this).attr('id'));
});

如何使用多个选择，如果我再次点击背景颜色=红色，那么css背景颜色又是白色？

现场例子：

http://jsfiddle.net/pUeue/28/

Answer 1

我认为你的意思是连续点击多个项会导致选择多个选项，如果是这样的话，那么：This Fiddle将为你完成这项工作。我转而使用一个类，因为这是（a）更好，（b）更容易。如果你不能使用一个类，那么调整就很容易了。然而，主要的解决方案是：

$('.click').click( function() {
    var item = $(this);

    if(item.hasClass('Active')) {   
        item.removeClass('Active');
        $('#example > [value="' + this.id + '"]').removeAttr('selected');
    }
    else {
        item.addClass('Active');
        $('#example > [value="' + this.id + '"]').attr('selected', 'true');
    }
});

基本上使用.val（）将选择一个项目，您需要做的是在您想要选择的项目上设置“selected”属性，允许一次选择多个项目。如果您使用的是jQuery 1.6或更高版本，我建议从attr / removeAttr切换到“.prop（'selected'，true / false）;因为selected是DOM属性。

Answer 2

在将当前的背景设置为红色之前，您可以将所有.click元素背景设置为白色：

$('.click').click( function() {
    $('.click').css('background-color', '#FFF');
    $(this).css('background-color', 'red');
    $('#example').val($(this).attr('id'));
});

Answer 3

试试这个：

$('.click').click( function() {
    if($(this).css('background-color')=='red')
        $(this).css('background-color', 'white');
     if($(this).css('background-color')=='white')
        $(this).css('background-color', 'red');
    $('#example').val($(this).attr('id'));
});

Answer 4

$('.click').click( function() {
    $('.click').css('background-color', '#FFFFFF');
    $(this).css('background-color', 'red');
    $('#example').val($(this).attr('id'));
});

Answer 5

您可以使用以下任意选择器获取选择：select，select[mutliple=multiple]，select#example。

就个人而言，我会选择最后一个。

使用这些小片段可以实现切换颜色：

$('.click').click(function (e) {
  var target = $(this);
  target.css('background-color', ('red' === target.css('background-color') ? 'white' : 'red'));
});

用jquery多次选择

5 个答案: