jquery - Divi：如何在单击另一个按钮时更改按钮外观

Question

我在 Divi builder 上有这两个按钮。我的目标：当我点击“按钮 2”时，这个变成橙色，“按钮 1”变成灰色，反之亦然。

在按钮设置（来自构建器）上，我为这两个按钮设置了空的链接字段。但是当我点击时，我当前的网页被重新加载......

我已将此脚本添加到 Divi Theme Option > Integration > header 中，只是为了点击第一个按钮：

jQuery(function ($) {
    $( document ).ready(function() {
        $(".button1").on("click", function(){
            event.preventDefault();
            alert("Button clicked");
        });
    });
});

对于这个 Button 1，我设置了 CSS 类：

结果：没有点击被捕获......

你能帮我完成我的最终目标吗？

Answer 1

你可以试试这个。忽略 CSS，主要部分是 jQuery 代码。

该变量buttons包含要添加此功能的元素组。

添加了“click”事件处理程序，其余的就很容易理解了。

jQuery(function($) {
  $(document).ready(function() {
    var buttons = $(".button1").siblings().addBack();
    buttons.on("click", function() {
      $(this).addClass('orange').removeClass('gray');
      buttons.not($(this)).addClass('gray').removeClass('orange');
    });
  });
});

body {
  padding: 10px 0;
}

div {
  border: none;
  padding: 10px 20px;
  border: 2px solid rgba(0, 0, 0, 0);
  background: #eee;
  display: inline;
  cursor: default;
}

.orange {
  border: 2px solid orange;
  color: orange;
}

.gray {
  border: 2px solid gray;
  color: gray;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="button1">Button1</div>
<div class="button2">Button2</div>
<div class="button3">Button3</div>
<div class="button4">Button4</div>

Answer 2

我添加了这个脚本：

jQuery(function ($) {
    
    $( document ).ready(function() {
        
        $(".button1").on("click", function(){
            event.preventDefault();
            $(".button2").removeClass('orange').addClass('gray');
            $(".button1").removeClass('gray').addClass('orange');
            $('.price').text("MOIS");
        });
        
        $(".button2").on("click", function(){
            event.preventDefault();
            $(".button1").removeClass('orange').addClass('gray');
            $(".button2").removeClass('gray').addClass('orange');
            $('.price').text("ANNÉE");
        });
    });
});

还有这个自定义 CSS：

button.orange{
  border:1px solid #efa100;
}
button.gray{
  border:1px solid #8f8f8f;
}

点击按钮工作正常（“价格”文本已成功更新），但按钮外观没有改变......

Answer 3

请改用这个，

我为边框样式创建了两个类橙色和灰色

button.orange{
  border:2px solid orange;
}
button.gray{
  border:2px solid gray;
}

然后，按钮单击事件添加类灰色并将其删除类橙色并将同级添加到橙色并删除它的灰色。

$(this).removeClass("orange").removeClass("gray");
$(this).addClass("gray");
$(this).siblings().addClass("orange").removeClass("gray");

jQuery(function ($) {
    $( document ).ready(function() {
        $("button").on("click", function(){
            event.preventDefault();
            $(this).removeClass("gray").removeClass("orange");
            $(this).addClass("orange");
            $(this).siblings().addClass("gray").removeClass("orange");
        });
    });
});

button{
  border:none;
  padding:10px 20px;
  border-radius:8px;
  color:#111;
}
button.orange{
  border:2px solid orange;
  color:orange;
}
button.gray{
  border:2px solid gray;
  color:gray;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="button1">Button1</button>
<button class="button2">Button2</button>