Question

我正在尝试使用javascript更改面板的背景颜色来模拟＆＃34;选择＆＃34;功能。

所以，点击后我按ID获取div并更改其背景颜色。

它工作正常，但只是暂时再次重置背景颜色，我不明白为什么？

DJANGO HTML模板

<div class="panel-group">
    {% if articles %}
        {% for article in articles %}
            <div class="panel panel-success" id="aid_{{ article.articleId }}">
                 <div class="panel-body">
                    <a href="" onclick="populateArticle({{ article.articleId }})" style="font-size: 1.2em"><b>{{ article.title }}</b></a><br/>
                    <span style="color:darkgrey; font-size:.9em; font-family:sans-serif; font-style:italic">{{ article.source }} - {{ article.date }}</span><br/>
                    {{ article.sentences }}
                 </div>
            </div>
        {% endfor %}
    {% else %}
        NO ARTICLES PRESENT
    {% endif %}
</div>

的Javascript

function populateArticle(aid) {
    document.getElementById('aid_'+aid).style.backgroundColor="#DEF1DE";
}

此处还有一个指向我录制的gif的链接，其中显示了行为：http://g.recordit.co/fSoTieo5Qn.gif（如果出现错误，请将链接复制粘贴到新标签中）。

为什么会发生这种情况？

Answer 1

您没有阻止默认的<a>代码行为，因此您的网页会刷新。

onclick="populateArticle({{ article.articleId }});return false;"

应该修理它。

Answer 2

不知道为什么会这样，我个人会尝试这个：

<script>
    $(document).ready(function () {
        $(".panel-body a").on("click", function (e) {
            e.preventDefault();
            var id = "#aid_" + $(this).attr("data-articleID");
            $(id).css("background-color", "#DEF1DE");
        });
    });
</script>

在你的jQuery脚本之后丢失了HTML中的onClick（不良做法），而是通过添加data-articleID属性来传递id引用。像这样：

<a href="#" data-articleID="id23" style="font-size: 1.2em"><b>article title</b></a>

如果您的问题仍然存在，则必须检查是否有其他JavaScript将背景更改为原始颜色。

更改引导板的背景颜色

2 个答案: