选择具有已知标题属性的元素答案

【问题标题】：Select element with known title attribute选择具有已知标题属性的元素
【发布时间】：2018-03-29 11:42:35
【问题描述】：

我有一个选择字段和几个带有图像的链接。单击这些图像会显示另一个链接。完美无缺。

现在，在 Javascript 中，我有了必须单击的图像的 alt 属性的文本。如何选择正确的点击具有相同alt属性的那个：

这是我的 HTML：

<div class="additionalimages">
    <div class="additional-images">
        <div class="row">
            <div class="col">
                <img src="image1.jpg" class="product-image" style="cursor: pointer" data-descr="">
                <a href="image1.jpg" class="product-image image-0" style="display:none;" title="ImageOne"></a>      
            </div>
            <div class="col">
                <img src="image2.jpg" class="product-image" style="cursor: pointer" data-descr="">
                <a href="image1.jpg" class="product-image image-1" style="display:none;" title="ImageTwo"></a>  
            </div>

        </div>
    </div>
</div>

这是我获取选择值的 Javascript。现在我得到了例如文本“ImageOne”。现在我想选择标题属性为 ImageOne 的 a 元素，以便触发点击事件。

$(".vm-chzn-select").chosen().change(function (event) {
  console.log("Select changed");
  var colorText = $(".vm-chzn-select option:selected").text();

  $(".additionalimages").find("a.product-image").attr("title"); 



});

现在最后一行返回了值，但我如何比较才能知道要点击哪一个？

【问题讨论】：

要理解你的真正意思并不容易。提供一个工作代码 sn-p 可能会做到这一点。
好的，我现在要添加额外的代码，添加 HTML 和代码，以便更清楚我想要什么

标签： javascript jquery jquery-chosen

【解决方案1】：

如果我假设您的colorText 拥有选定的文本值ImageOne，您应该能够简单地这样做，以在具有相同title 值的锚上触发click 事件。

$(".vm-chzn-select").chosen().change(function (event) {
  console.log("Select changed");
  var colorText = $(".vm-chzn-select option:selected").text();

  $(".additionalimages a.product-image[title='" + colorText + "']").click(); 

});

【讨论】：

这就是答案。它不起作用的原因是因为我不得不从 colorText 修剪文本，因为它有一个额外的空间。现在它可以完美运行了，谢谢！

【解决方案2】：

您可以像这样按属性（和变量）选择元素...

var altValue = "alt-tag-value";
var $img = $("img[alt='" + altValue + "']");

这将返回具有指定 alt 属性值的图像（或多个图像）。

【讨论】：