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/

ここでは、1ボタンをクリックして色を変更するだけでなく、2ボタンをクリックして2ボタンの色を変更するだけでなく、1ボタンをクリックして色を失う場合も必要です...これはすべて、2番目のdivの1ボタンと2ボタンに影響を与えないためです...どうすればよいですかそれを行う？それを行う方法はありますか？ありがとう！

id_add_ ...はここでは必須ではありませんが、コードの一部であるため、ここに表示することにしました。

4

2 に答える 2

1

ここにあるチタンの答えを拡張しています。

ボタンの各セット内で色の変更を維持するには、親に対してチタンを変更するだけです。また、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 に答える