在jquery中切换颜色

Question

我有一个问题 首先这是我的代码

    $('.boxColor ul li').click(function () {
        $("link[href*='default']").attr('href', $(this).attr("data-color"));
    });

    <section class="boxColor">
        <i class="fa fa-cog" aria-hidden="true"></i>
        <ul>
            <li data-color='css/color/alizarin.css'></li>
            <li data-color='css/color/amethyst.css'></li>
            <li data-color='css/color/concrete.css'></li>
            <li data-color='css/color/nephritis.css'></li>
            <li data-color='css/color/orange.css'></li>
            <li data-color='css/color/piteRiver.css'></li>
            <li data-color='css/color/pumpkin.css'></li>
            <li data-color='css/color/wetAsphalt.css'></li>
            <li data-color='css/color/default_style.css'></li>
        </ul>
    </section>

问题是我点击li来改变颜色， 第一次单击时颜色会发生变化，当我点击另一种颜色时，颜色不起作用 开关按钮只工作一次

Answer 1

问题不包括HTML中的<link>元素，但这可能是因为在第一次更改后，link[href*='default']将不再选择任何元素，因为新的href不会不包含字符串default。

我建议给有问题的链接元素一个ID，以便它始终保持不变：

HTML

<link rel='stylesheet' type='text/css' href='css/color/default_style.css' id='color_stylesheet'>

<!-- other stuff follows -->

的JavaScript

$('.boxColor ul li').click(function () {
    $('#color_stylesheet').prop('href', $(this).attr('data-color'));
});