【问题标题】:How to change image's href with Javascript by using title name?如何使用标题名称使用 Javascript 更改图像的 href?
【发布时间】:2018-05-18 17:23:54
【问题描述】:

在此幻灯片中,这里有大约 50 张图片。我使用类似于 wordpress 的平台,并且不允许我更改图像 href。图像具有相同的类名。是否可以使用标题名称(每个图像都是唯一的)并更改某些图像的href?

<div id="slideshow" class="vlt-d-slider" style="position: relative; overflow: hidden; width: 928px; height: 522px;">
    <div class="slide" data-vltcaption="0" data-brand="none" data-topic="INST" data-url="_0.jpg" style="position: absolute; left: 0px; visibility: visible; z-index: 3; line-height: 520px; height: 522px;">
<a class="slide-lightbox" rel="vlt-slideshow" href="m_0.jpg" title="Pfusc number photo 1" target="_blank">
<img class="slide-img" src="_0.jpg" alt="Pfusc number photo 1">
</a>
</div>
      <div class="slide" data-vltcaption="1" data-brand="none" data-topic="INST" data-url="0.jpg" style="position: absolute; left: 0px; visibility: hidden; z-index: 1; line-height: 520px; display: block; height: 522px;">
<a class="slide-lightbox" rel="vlt-slideshow" href="f_0.jpg" title="Pfusc number photo 2" target="_blank">
<img class="slide-img" src="0.jpg" alt="Pfusc number photo 2">
</a>
</div>
      <div class="slide" ....
</div>
    </div>

【问题讨论】:

  • 你的意思是按标题的alt属性吗?

标签: javascript css href


【解决方案1】:

首先,图片没有href,它们有src

其次,当你说“标题名称”时,我认为你的意思是 alt

在这种情况下,document.querySelector('[alt="the title"]').src = 'the new src';

如果你想通过链接的标题找到它,你必须这样做document.querySelector('a[title="the title"] &gt; img').src = 'the new src';

【讨论】:

  • 您可以通过使用('a[title="the title"] &gt; img') 并避免使用第二个查询选择器来简化它。
  • 谢谢,@funcoding 编辑了它! OP,您应该看看developer.mozilla.org/en-US 以立即掌握这些基础知识;-)
【解决方案2】:

首先,我不确定您是否要更改a tagimg tag 属性,但我会假设它是a tag,因为您提到了href。是的。你可以这样做:

$("a[title='yourTitle']").attr('href', 'https://www.google.com/');

如果你想要图片:

$('img[alt="Your Alt"]').attr('src', 'image.jpg');

【讨论】:

  • 你假设 jQuery 是可用的,甚至没有提到 jQuery。
  • 你说得对,如果 OP 需要 vanilla,我会调整代码。
猜你喜欢
  • 1970-01-01
  • 2022-07-26
  • 1970-01-01
  • 2011-04-29
  • 2021-05-01
  • 2021-08-27
  • 2012-11-23
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多