Question

我有两个按钮，文字说白天和黑夜，现在我想根据点击哪个按钮应用css类onclick

这是我的HTML

<div class="container">
    <button class="btn btn-primary">day</button>
    <button class="btn btn-primary">night</button>
</div>

这是我的jquery

<script>  

    $(function () {
        $('button').click(function () {
            var buttonName = $(this).text().toLocaleLowerCase;
            console.log(buttonName);
            $('div').attr('button', buttonName + '.Class');
        });
    });        
</script>

请帮我运行此代码
我有这条线的麻烦 $（'div'）。attr（'button'，buttonName +'。Class'）; 其中代码将决定在单击事件触发时需要在按钮上加载哪个cssClass。

Answer 1

给按钮提供ID，然后给出点击功能

JSBIN链接 http://jsbin.com/femabeqedo/1/edit

<强> HTML

<div class="container">
    <button id="btnDay" class="btn btn-primary">day</button>
    <button id="btnNight" class="btn btn-primary">night</button>
</div>

Java脚本

<script>

    $(function () {
        $('#btnDay').click(function () {
            $('body').removeClass("night");
            $('body').addClass("day");

        });

      $('#btnNight').click(function () {
            $('body').removeClass("day");
            $('body').addClass("night");
        });
    });   
  </script>

Answer 2

使用

$(this).addClass('classname');

＆＃34;这＆＃34;是指触发点击的确切元素。

Answer 3

我认为这就是你想要的。

检查here它将类添加到所选按钮的div。

HTML

div class="container">     
<button class="btn btn-primary" value="day">day</button>

<button class="btn btn-primary" value="night">night</button> 
</div>

Jquery的

$(function () {
    TempButtonName = '';
        $('button').click(function () {
            $('div').removeClass(TempButtonName );
            var buttonName = $(this).val();
            console.log(buttonName);
            $('div').addClass(buttonName);
            TempButtonName = buttonName;
        });
  });

如何根据jquery中的css类名来添加类

3 个答案: