Question

希望你能帮助我，我有一个名为＆＃34; diagnosticoST＆＃34;的页面，有4个按钮（btn-institucional，btn-economico，btn-social，btn-natural），这些按钮之前是背景颜色他们内部的调查已经完成，当用户完成调查时（例子页面）＆＃34; Quadrant_1＆＃34;然后单击继续按钮，它将返回到＆＃34; diagnosticoST＆＃34;页面，并且必须更改单击的按钮的颜色，我无法计算如何存储单击的按钮功能，以便当我返回到第一页时它更改按钮的颜色（我不能通过CSS执行它，因为触发器换颜色必须是继续按钮）

这是我正在使用的代码，但它不起作用请帮帮我:(

<!---QUADRANT_1 PAGE -->
<html>
    <button class="quadrant_1">Continue</button>
</html>

<script>
    $(".quadrant_1").on("click",function(){
        localStorage.setItem('quadrant_1', 'clicked');
        window.location.href = "diagnosticoST.html";
    });

</script>

<!---DIAGNOSTICOST PAGE -->
<div class="row">
    <a href="quadrant_1.html">
        <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12 number" style="background-color:#003E8B; cursor: pointer;" id="btn-institucional">
            <p>1</p>
            <img src="icons/institucional.png" width= "50%">
            <p>Desarrollo Institucional para un Buen Gobierno</p>   
        </div>
    </a>
</div>

<script>
if(localStorage.getItem('quadrant_1') === 'clicked'){
    $("btn-institucional").css({backgroundColor: "red"});
}
</script>

Answer 1

您想要选择的元素就是这个：

<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12 number" style="background-color:#003E8B; cursor: pointer;" id="btn-institucional">

其ID为btn-institucional。要选择ID，请将#放在选择器字符串前面：

$("#btn-institucional").css({backgroundColor: "red"});

（您的$("btn-institucional")搜索标记名称为btn-institucional的元素，当然不存在）

如果你试图在一个页面和另一个页面之间进行通信，我建议放弃localStorage并使用window.open代替，如下所示：

const w = window.open('https:// ... surveyToComplete.html');
w.document.addEventListener("DOMContentLoaded", (event) => {
  document.querySelector('#submitSurveyButton').addEventListener('click', () => {
    $("btn-institucional").css({backgroundColor: "red"});
  });
});

Answer 2

清除首页上的本地存储空间。

$( document ).ready(function() {


      localStorage.clear();

        $(".quadrant_1").on("click",function(){
            localStorage.setItem('quadrant_1', 'clicked');
            window.location.href = "index2.html";
        });

        if(localStorage.getItem('quadrant_1') === 'clicked'){
        $("#btn-institucional").css({backgroundColor: "red"});
        }
    }

)

这是一个傻瓜。

https://plnkr.co/edit/YiFkmTXIYiGA8XpxkUkK?p=preview

单击其他页面上的按钮时更改div的颜色

2 个答案: