0

这里我有一些代码：

HTML

<div>
    <div class="ca_button"><a href="javascript:void(0)" class="ca_button" onClick="setQuality(-100, 'price_quality', '{$lang501}/{$lang502}');">1 button</a></div>
<div class="ca_button1"><a href="javascript:void(0)" class="ca_button1" onClick="setQuality(100, 'price_quality', '{$lang501}/{$lang502}');">2 button</a></div>
</div>
<div>
<div class="ca_button"><a href="javascript:void(0)" class="ca_button" onClick="setQuality(100, 'parameter2', '{$lang501}/{$lang502}');">1 button</a></div>
<div class="ca_button1"><a href="javascript:void(0)" class="ca_button1" onClick="setQuality(100, 'parameter2', '{$lang501}/{$lang502}');">2 button</a></div>
</div>

JS

var rating_quality = new Array();
function setQuality(qulaity, type_rating, name)
{
    //alert('test' + qulaity + ' ->' + type_rating + ' ' + name);   
    rating_quality[type_rating] = qulaity;
    if(qulaity > 0)
    {
        //console.log($('#id_adv_' + type_rating).length);
        if ($('#id_adv_' + type_rating).length == 0)
        {
            $('#id_add_adventage').append("<div id='id_adv_" + type_rating + "'>" + name + "</div>");
            $('#id_disadv_' + type_rating).remove();
            $('#id_add_adventage').css('font-size', '12');
            $(this).css('background-color', '#9C0');


        }
    }
    else
    {
        if ($('#id_disadv_' + type_rating).length == 0)
        {
            $('#id_add_disadventage').append("<div id='id_disadv_" + type_rating + "'>" + name + "</div>");
            $('#id_adv_' + type_rating).remove();
            $('#id_add_disadventage').css('font-size', '12');
            $(this).css('background-color', '#C00');

        }
    }
    //console.log('------------ispis-------------');
    /*for(key in rating_quality)
    {
        console.log('key:'+ key + ' ' + rating_quality[key]);
    }
    */
}

css

.ca_button  {
    display: inline-block;
    text-decoration: none;
    padding: 10px 20px;
    text-align: center;
    background-color: #BABABA;
    border-color: #FFFFFF;
    border-width: 1px;
    -webkit-border-radius: 4px 0px 0px 4px;
    border-radius: 4px 0px 0px 4px;
    border-style: solid;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    line-height: 120%;
    color: #FFF;
    -moz-border-radius: 4px 0px 0px 4px;
    min-height:8px;
    margin-top:15px;
    margin-left:48px;
}

.ca_button1  {
    display: inline-block;
    text-decoration: none;
    padding: 10px 20px;
    text-align: center;
    background-color: #BABABA;
    border-color: #FFFFFF;
    border-width: 1px;
    -webkit-border-radius: 0px 4px 4px 0px;
    border-radius: 0px 4px 4px 0px;
    border-style: solid;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    line-height: 120%;
    color: #FFF;
    -moz-border-radius: 0px 4px 4px 0px;
    width:73px;
    min-height:15px;
    margin-top:15px;
}

.button1:hover {
    background-color: #91B522;
    color: #FFF;
}

.button1:active {
    background-color: #91B522;
    color: #FFF;
}

.button1:visited {
    background-color: #91B522;
    color: #FFF;
}

http://jsfiddle.net/nJ895/8/

在这里，当我单击 1button 更改颜色时，我也需要单击 2button 更改 2button 上的颜色，但也需要 1button 失去颜色...所有这些都不会影响第二个 div 上的 1button 和 2button ...我怎么能去做？有没有办法做到这一点？谢谢！

id_add_ ... 在这里不是必需的，而是代码的一部分，所以我决定在这里展示。

4

2 回答 2

1

我正在扩展Titanium 的答案，在这里找到。

为了使颜色变化保持在每组按钮内，只需使 Titanium 的变化相对于父级。此外，要使其在 button 和 button1 上都起作用，只需将它们添加到选择器中即可。

$(".ca_button, .ca_button1").click(function() {

  // Set $this to the clicked div, or the div holding the a that was clicked
    $this = $(this);
    if($this.is("a")) { $this = $this.parent(); }

 // Set $par to the parent of that div - this is the div that holds a given set of buttons
    $par = $this.parent();

 // Set the background color for all buttons in this set
    $par.find(".ca_button, .ca_button1").css("background-color", "#bababa");

 // Set the color of the currently clicked div
    if ($(this).hasClass("ca_button1")){
        $this.css("background-color", "#0F0");
    } else {
        $this.css("background-color", "#F00");
    }

    return false;

});

http://jsfiddle.net/daCrosby/EC44Z/3/

于 2013-03-12T19:42:00.963 回答
0

请参考.css()jQuery中的函数：http: //api.jquery.com/css/

将此添加到您的代码中，您应该得到您要求的结果：

JS

$(".ca_button").click(function() {

    // Declare '$(this)' so it can be changed later
    $this = $(this);

    // If this is an 'a' tag, change $this
    if($this.is("a")) { $this = $this.parent(); }

    // Remove the background colour on all other buttons
    $(".ca_button").css("background-color", "#bababa");

    // Change the background colour on the button that has been clicked
    $this.css("background-color", "#f00");

    // Because there can be two elements called .ca_button when clicking,
    // we're returning false to stop the function from happening again
    return false;

});

工作示例

http://jsfiddle.net/DsCw3/

于 2013-03-12T19:25:02.980 回答