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

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

在按钮设置（从生成器中），我为这两个按钮设置了空链接字段。但当我点击时，我当前的网页被重新加载

我已将此脚本添加到Divi主题选项>集成>标题中，只是为了抓住单击第一个按钮的机会：

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

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

结果：没有点击被捕获

---

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

请试试这个

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

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（函数（$）{
$（文档）.ready（函数（）{
$（“按钮”）。在（“单击”，函数（）{
event.preventDefault（）；
$（此）.removeClass（“灰色”）.removeClass（“橙色”）；
$（此）.addClass（“橙色”）；
$（this.this（）.addClass（“灰色”）.removeClass（“橙色”）；
});
});
});
按钮{
边界：无；
填充：10px 20px；
边界半径：8px；
颜色：#111；
}
纽扣，橙色{
边框：2倍纯色橙色；
颜色：橙色；
}
按钮。灰色{
边框：2倍纯色灰色；
颜色：灰色；
}

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

变量
按钮
包含要添加此功能的元素组

添加了“click”事件处理程序，rest很容易理解


jQuery（函数（$）{
$（文档）.ready（函数（）{
变量按钮=$（“.button1”）.sides（）.addBack（）；
按钮。打开（“单击”，函数（）{
$（this.addClass（'orange'）.removeClass（'gray'）；
按钮.not（$（this））.addClass（'gray'）.removeClass（'orange'）；
});
});
});
正文{
填充：10px0；
}
div{
边界：无；
填充：10px 20px；
边框：2倍实心rgba（0,0,0,0）；
背景：#eee；
显示：内联；
游标：默认值；
}
.橙色{
边框：2倍纯色橙色；
颜色：橙色；
}
格雷先生{
边框：2倍纯色灰色；
颜色：灰色；
}

按钮1
按钮2
按钮3
按钮4
我添加了以下脚本：

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;
}

点击按钮工作正常（“价格”文本已成功更新），但按钮外观没有改变…
@freedomn-m：对不起，我不明白你的意思。请为你的
添加HTML。请尝试此
$（“按钮”）。在（“点击”，函数（）{}
上单击每个按钮，此函数将执行。点击是监听（现在可以正常工作了），但两个按钮上的颜色都没有改变尝试将CSS更改为类名称（
.orange{..}
，而不是
按钮.orange{..}
），它正在查找类为“orange”的按钮元素。这没什么问题，但是如果你用div而不是按钮，它将不起作用。还要确保橙色/灰色样式在定义按钮外观的CSS之后，因为你想覆盖它。我已经尝试过只使用类名，但它也不起作用。我没有在CSS中定义按钮元素。按钮是用h Divi Builder。你能显示JQuery正在处理的HTML和按钮的完整CSS吗？我猜JQuery中可能存在CSS专用性问题或引用问题，但是如果没有更多的上下文，很难找到这些内容。