javascript - 更改孩子的href目的地
问题描述
我有一堆带有子 div 的块(div),它们有链接(sp-pcp-readmore)我想用 jQuery 更改每个链接的 href 值(sp-pcp-readmore)。一个 div(块)的 HTML 如下:
<div class="sp-pcp-post pcp-item-4978" data-id="4978">
<div class="pcp-post-thumb-wrapper">
<div class="sp-pcp-post-thumb-area">
<a
class="sp-pcp-thumb"
aria-label="feature_image"
href="/machines/"
target="_blank"
>
<img
src="machine-300x300.jpg"
data-src="machine-300x300.jpg"
class="pcp-lazyload lazy-loaded"
alt=""
width="300"
height="300"
/>
</a>
</div>
</div>
<h2 class="sp-pcp-title">
<a href="/machines/" target="_blank"
>Machines</a
>
</h2>
<div class="sp-pcp-post-content">
<div class="sp-pcp-readmore">
<a
class="pcp-readmore-link"
target="_blank"
href="/machines/"
>
Explore Now
</a>
</div>
</div>
</div>
我遇到问题的javascript就是这个,它根本没有改变href
$(".sp-pcp-title").each(function() {
switch($(this).text()) {
case "Machines":
$(this).find(".pcp-readmore-link").attr('href', '/product-category/machines/');
break;
case "Weights":
$(this).find(".pcp-readmore-link").attr('href', '/product-category/weights/')
break;
case "Dumbells":
$(this).find(".pcp-readmore-link").attr('href', '/product-category/dumbells/')
break;
case "Barbels":
$(this).find(".pcp-readmore-link").attr('href', '/product-category/barbels/')
break;
}
});
解决方案
这可以大大简化
$(".sp-pcp-title").each(function() {
let text = $("a",this).text().trim();
$(this).next().find(".pcp-readmore-link").attr('href', `/product-category/${text.toLowerCase()}`);
});
$(".sp-pcp-title").each(function() {
let text = $("a",this).text();
$(this).next().find(".pcp-readmore-link").attr('href', `/product-category/${text.toLowerCase()}`);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="sp-pcp-post pcp-item-4978" data-id="4978">
<div class="pcp-post-thumb-wrapper">
<div class="sp-pcp-post-thumb-area">
<a class="sp-pcp-thumb" aria-label="feature_image" href="/machines/" target="_blank">
<img src="machine-300x300.jpg" data-src="machine-300x300.jpg" class="pcp-lazyload lazy-loaded" alt="" width="300" height="300" />
</a>
</div>
</div>
<h2 class="sp-pcp-title">
<a href="/machines/" target="_blank">Machines</a>
</h2>
<div class="sp-pcp-post-content">
<div class="sp-pcp-readmore">
<a class="pcp-readmore-link" target="_blank" href="">Explore Now</a>
</div>
</div>
</div>
选择
const hrefs = { "Machine":"machine", "Bar- and dumbells":"weights" }
$(".sp-pcp-title").each(function() {
let text = $("a",this).text().trim();
$(this).next().find(".pcp-readmore-link").attr('href', `/product-category/${hrefs[text]}`);
});
const hrefs = { "Machines":"machines", "Bar- and dumbells":"weights" }
$(".sp-pcp-title").each(function() {
let text = $("a",this).text().trim();
$(this).next().find(".pcp-readmore-link").attr('href', `/product-category/${hrefs[text]}`);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="sp-pcp-post pcp-item-4978" data-id="4978">
<div class="pcp-post-thumb-wrapper">
<div class="sp-pcp-post-thumb-area">
<a class="sp-pcp-thumb" aria-label="feature_image" href="/machines/" target="_blank">
<img src="machine-300x300.jpg" data-src="machine-300x300.jpg" class="pcp-lazyload lazy-loaded" alt="" width="300" height="300" />
</a>
</div>
</div>
<h2 class="sp-pcp-title">
<a href="/weights/" target="_blank">Bar- and dumbells</a>
</h2>
<div class="sp-pcp-post-content">
<div class="sp-pcp-readmore">
<a class="pcp-readmore-link" target="_blank" href="">Explore Now</a>
</div>
</div>
</div>
推荐阅读
- sql - 异常:[IBM][CLI Driver][DB2/LINUXX8664] SQL0104N 意外令牌错误
- oracle - 使用 URL 分配 oracle PLSQL 变量
- email - 所有 Heroku 评论应用的 MX 记录
- javascript - Vue可拖动不更新索引
- git - 如何在 git 中列出所有远程现有分支?
- scala - 无法在没有空代码块的情况下实例化没有方法的特征
- javascript - 使用 JWT 对 json-server 进行授权
- php - 无法禁用 PHP X-Powered-By 标头
- visual-studio-code - 卡住:[Remote - SSH 0.49.0] Setting up SSH Host DEV: (details) Initializing VS Code
- php - 减少我的 laravel 应用程序中的重复查询