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>

在这种情况下，颜色为红色/黑色

每次点击图像时，都会为其分配＆＃34;选择＆＃34;

我知道我可以用一个简单的

变量获得标题

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

但我不确定在应用所选类时如何获得它。

Answer 1

var color;

if ($(this).hasClass('selected')) {
   color = $(this).attr('title');
}

and so on...

Answer 2

var valueoftitle = $('.selected')[<your_index>].attr('title');

编辑：

使用$('.selected')，您将获得一个包含类.selected的所有元素的数组。然后，您可以使用方括号访问这些元素，并使用您要访问的元素的索引。之后你就拥有了这个元素，你可以随心所欲地使用它，就像在这个例子中一样：.attr('title')，它会返回属性＆＃39; title＆＃39;的值。您可以以任何可能的方式使用它，例如for循环，foreach循环或仅与索引内联。

Answer 3

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

<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>

Answer 4

您提到单击图像时会应用所选的类。假设您有一个绑定到图像的点击处理程序，您可以使用$(this).parent('a').attr('title')

从父链接中提取title属性

获取href标题并单击更改

4 个答案: