点击添加背景颜色答案

【问题标题】：Add background color on click点击添加背景颜色
【发布时间】：2013-05-23 01:16:09
【问题描述】：

嗨，我的 django 模板中有一个动态的 li

<script type="text/javascript" language="javascript">
    function setSize(size) {
        document.getElementById('id_option1').value = size;
    }

    function notavailable(notavai) {
        alert('selected product is not available');
    }
</script>

{% for i in prosize %}
    {% if i.num_in_stock > 0 %}
        <li><a id="{{i.option1}}1" ref="javascript:setSize('{{i.option1}}')">{{i.option1}}</a></li>
    {% endif %}
{% endfor %}

我需要将 background *color* 添加到 active 一个 link onclick强>我已经在一个 javascript 函数上使用。请建议我该怎么做

【问题讨论】：

您到底想要什么？你想当用户点击你的链接时，改变它的背景颜色？
是的，正是我想要的
我已经添加了我的答案，如果您使用的是jQuery，您可以更好地编写函数，我正在编写它，并且会尽快更新我的答案;)。

标签： javascript jquery django-templates

【解决方案1】：

你想要的不应该用 javascript 或 python 实现，而是用 CSS。您应该在 CSS 中使用 :active 选择器。

http://www.w3schools.com/cssref/sel_active.asp

【讨论】：

【解决方案2】：

Working jsFiddle Demo

所以，很容易，在 HTML 标记中你有：

<a class="order" id="{{i.option1}}" href="javascript:setSize('{{i.option1}}')">{{i.option1}}</a>

请注意，我已更改 id。我从末尾删除了1。
另外，您编写的href 属性无效。我已经更正了。
此外，我还为其添加了一个类以供进一步使用。

并将您的 setSize 函数更改为：

// because IE9 (and below) doesn't support for getElementsByClassName
// we use this funciton instead
// written by Jonathan Snook
// http://snook.ca/archives/javascript/your_favourite_1
function getElementsByClassName(node, classname) {
    var a = [];
    var re = new RegExp('\\b' + classname + '\\b');
    var els = node.getElementsByTagName("*");
    for(var i=0,j=els.length; i<j; i++)
        if(re.test(els[i].className))a.push(els[i]);
    return a;
}

function setSize(size) {
    // i just comment this line as i don't know what it doesyourself
    // document.getElementById('id_option1').value = size;

    // change the color the others to transparent
    var others = getElementsByClassName(document, 'order');
    for (var i = 0, l = others.length; i < l; i++) {
        others[i].style.backgroundColor = 'transparent';
    }

    // this line will change the background color of your element
    document.getElementById(size).style.backgroundColor = '#ff6600';
}

jQuery

如果您使用 jQuery，则无需在内部使用 javascript，让 jQuery 为您处理所有这些。将此代码写入您的 .js 文件中：

$(function () {
    // get al links and attach the `click` handler to them
    $('.order').on('click', function (e) {
        // prevent default behaviour of link
        e.preventDefault();

        // get size and do something with it
        var size = $(this).attr('data-size');
        $('#textbox').val(size);

        // change the color the others to transparent
        $('.order').css('background-color', 'transparent');

        // change the color of link
        $(this).css('background-color', '#ff6600');
    });
});

您可以查看jsFiddle demo。

【讨论】：

我用过它，它工作正常 document.getElementById(size).style.backgroundColor = '#ff6600';但这会使所有背景在点击时发生变化，我一次只需要一个突出显示
@user2106353 你之前没提过，我已经更新了我的答案，检查一下（不要忘记更改 HTML 标记）。我在你的链接中添加了一个类。
@user2106353 不客气，为了兼容IE我也改了JavaScript方法，不要错过:)。

【解决方案3】：

在您的循环中，您还可以绑定 on click 事件并传递 id ...like

{% for i in prosize %}
    {% if i.num_in_stock > 0 %}
        <li><a id="{{i.option1}}1" onclick='ChangeColor('+{{i.option1}}1+')' ref="javascript:setSize('{{i.option1}}')">{{i.option1}}</a></li>
    {% endif %}
{% endfor %}

function ChangeColor(id)
{
    $("#"+id).css("background","#fff");
}

【讨论】：