如何在具有相同类的click事件上更改动态创建的div的颜色?

时间:2013-10-29 07:09:08

标签: javascript jquery css

如何在点击事件中更改动态创建的div的颜色,谁具有相同的类?

$(this).css('color','pink');有了这个,我们可以改变点击的div颜色。

但我想将点击的颜色改为粉红色,并将divs颜色转换为黑色。

请提示吗?

参考代码:

$('#main_div').on('click','class1', function(){
  $(this).css('color','pink');       
});

我有三个正在上课“class1”的div。当我点击一个div时,那个div应该变成粉红色而其他div应该是黑色。

5 个答案:

答案 0 :(得分:1)

试试这个,

<强> DEMO

<强>代码:

  $("#main_div").on("click", ".class1", function () {
        $(this).css("color", "red");
        $(".class1").not(this).css("color", "black");
    });

答案 1 :(得分:1)

尝试这样的事情,FIDDLE

CSS

    .clrs{
            height:100px;
            width:100px;
            background-color: green;
            margin-bottom: 10px;
        }

JAVASCRIPT

        $(function(){
            $('.clrs').click(function(){
                $('.clrs').css('background-color','black');
                $(this).css('background-color','pink');
            })
        })

HTML

    <div class="clrs"></div>
    <div class="clrs"></div>
    <div class="clrs"></div>
    <div class="clrs"></div>
    <div class="clrs"></div>

答案 2 :(得分:0)

尝试这样的.on():

$('body').on('click','div.yourclassname',function(){
    $(this).css('color', 'pink');
})

答案 3 :(得分:0)

试试这个:

$("#div").on("click",".red",function(){
    $(this).css("color","pink");
});

Here is the fiddle

答案 4 :(得分:0)

试试这样:

$('#main_div').on('click','class1', function(){
  $('.class1').css('color','black').eq($(this).index()).css('color', 'pink');       
});