如何根据类jquery回调函数更改单个元素？

Question

我希望能够为类创建“单击”响应，然后更改所单击的特定元素的CSS。

这似乎不起作用。我认为使用$(this)表示特定元素但似乎没有。一个复杂的问题是我重写了外部样式表。

我的jquery代码：

$('.myClass').click( function() {
    $('this').css("width: 30% !important");
    alert("THIS ALERT WORKS");
})

警报确实有效。我有静态CSS，可以更改.myClass。

我的HTML：

<button class="classA classB myClass" type="submit">Button</button>

我也试过$('this').val("")，但这不起作用。

Answer 1

试试这个

$('.myClass').click( function(){
    $(this).css('width', '30%');
    // or $(this).css('width', '30% !important');  
})

在你的代码中有两个错误

<强> 1

$('this') should be $(this)

<强> 2

$('this').css("width: 30% !important");应为$('this').css("width", "30% !important");

如果您想要更改多个选项，可以像这样做

$(this).css({backgroundColor: "green", borderColor: "black", borderWidth: "30px"}); 

//或

$(this).css({'background-color': "green", 'border-color': "black", 'border-width': "30px"});   

$.css - on this page您可以找到有关$.css语法

的详细说明

Answer 2

你的语法错了，它应该是

  $(this).css("width", "30% !important");

或

  $(this).css({"width": "30% !important"});

不

  $(this).css("width: 30% !important");

您需要将属性与其值分开。

<强>更新

如果您想编辑多个属性，我根本不会使用.css()。我会使用addClass来代替CSS类。这样，JS的开销就更少了。例如：

<强> JS

$(this).addClass("adjust")

<强> CSS

.adjust{
   background-color: green; 
   border-color: black;
   border-width: 30px;
}

Answer 3

试试这个：

$('.myClass').click( function(){
  $(this).css('width', '30%');
  alert("THIS ALERT WORKS");
});

Live demo

Answer 4

    $('.myClass').click( function(){
            $('this').css("width", "30% !important");
            alert("THIS ALERT WORKS");
    })