javascript - 获取 href 标题并在单击时更改

Question

我在图片库中设置了一系列链接，我需要一种向用户显示颜色的方法。目前，颜色名称存储在图库中图像链接的 href 标题中。

<div class="select-option swatch-wrapper selected" data-attribute="pa_luxcraft-2" data-value="redblack">
<a href="#" style="width:32px;height:32px;" title="Red/Black" class="swatch-anchor"><img src="/ay/wp-content/uploads/2017/01/Center-Table-Red-Black-32x32.jpg" alt="thumbnail" class="wp-post-image swatch-photopa_luxcraft-2_ swatch-img" width="32" height="32" data-pin-nopin="true"></a>
</div>

在本例中，颜色为红色/黑色

每次单击图像时，都会为其分配“选定”类

我知道我可以通过一个简单的变量来获取标题

var title = $(this).attr('title');

但是我不确定当应用所选的类时如何获取它。

Answer 1

我提供了几个示例来帮助您入门。

<div class="displayToUser"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>

$("a").click (function () {
    $(document).css("background",$(this).attr("title"));  //set's background to color, just to let you know how to do that.
    $(this).attr("title","new title"); //changes title if that's what you want
    $(".displayToUser").html(
        $(this).attr("title")
    ); // sets an element to show the contents of title, just so that you know how to do that
    $(this).hasClass("selected"); //if you want to check to see if it has the class selected
    $(this).addClass("selected"); //to add the class selected, if that's what you're looking for.
});

</script>