更改孩子的 href 目的地

Question

我有一堆帶有鏈接的子 div 的塊 (div) (sp-pcp-readmore) 我想用 jQuery 更改每個鏈接 (sp-pcp-readmore) 的 href 值。 一個 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;
            }
        });

Answer 1

這可以大大簡化

$(".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>

Answer 2

這是根據您的示例 HTML 代碼更改的，目標鏈接不是.sp-pcp-title的子項，而是.sp-pcp-post-content內的下一個兄弟

 $(".sp-pcp-title").each(function() { switch($(this).children('a').text()) { case "Machines": $(this).next('.sp-pcp-post-content').find(".pcp-readmore-link").attr('href', '/product-category/machines/'); break; case "Weights": $(this).next('.sp-pcp-post-content').find(".pcp-readmore-link").attr('href', '/product-category/weights/') break; case "Dumbells": $(this).next('.sp-pcp-post-content').find(".pcp-readmore-link").attr('href', '/product-category/dumbells/') break; case "Barbels": $(this).next('.sp-pcp-post-content').find(".pcp-readmore-link").attr('href', '/product-category/barbels/') break; } });

 <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="/machines/" > Explore Now </a> </div> </div> </div>