时间戳

首页 > 解决方案 > 根据 div:contains 值更改数据集属性

javascript - 根据 div:contains 值更改数据集属性

问题描述

我正在尝试根据相应 div 的内容更改 a 标签的 data-target 属性。我已经测试了几种不同的途径，并认为这是最干净的。但是，由于这是在修改多个条目，因此只有第一个条目的数据目标正在更新，并且它正在被修改为市场，而不是负担得起的。.html 和 .css 更改按预期工作。只有导致问题的数据目标元素。您可以在下面看到我尝试过的其他变体评论。

jQuery(document).ready(function ($) { //replaces all instances of $ with jquery for Wordpress
    $(".unit-rate-mapped div").each(function () {
        if ($(this).is(':contains("mk")')) { //Only Market Rate units codes will contain mk
            $(this).html('Market Rate'); //Change the HTML value to Market Rate
            $(this).css({ "background": "rgba(4,57,99,.1)", "color": "#043963" });
            $('#unit-qual-link').attr('data-target', '.fusion-modal.form-market'); //modify the data-target attribute of the pre-Qualify link to link to the market form
            //document.getElementById("unit-qual-link").dataset.target = ".fusion-modal.form-market"; 
        } else { //Anything and everything else goes to orange
            $(this).html('Affordable'); //Change the HTML value to Affordable
            $(this).css({ "background": "rgba(229,104,53,.1)", "color": "#e56835" }); //Change the background color and type to orange
            $('#unit-qual-link').attr('data-target', '.fusion-modal.form-affordable'); //modify the data-target attribute of the pre-Qualify link to link to the afforrdable form
            //document.getElementById("unit-qual-link").dataset.target = ".fusion-modal.form-affordable"; //modify the URL of the Pre-Qualify link to link to the affordable form
        }
    });
//Tried this variation as well
    // if ($(".unit-rate-mapped div:contains('Market Rate')")) {
    //     $('#unit-qual-link').attr('data-target', '.fusion-modal.form-market');
    // } else {
    //     $('#unit-qual-link').attr('data-target', '.fusion-modal.form-affordable');
    // }
});

这是我要修改的 HTML 示例：

<!--Market Example-->
<div class="essential-grid-unit-row-grid row-1">
    <div class="unit-rate-mapped">
        <div class="unit-rate-map">mk1234</div>
    </div>

    <div class="unit-qualifications">
<a id="unit-qual-link" class="fusion-modal-text-link" data-toggle="modal" data-target=".fusion-modal.form-market" href="#">Pre-Qualify</a></div>
</div>

<!--Affordable Example-->
<div class="essential-grid-unit-row-grid row-1">
    <div class="unit-rate-mapped">
        <div class="unit-rate-map">1b1b60</div>
    </div>

    <div class="unit-qualifications">
<a id="unit-qual-link" class="fusion-modal-text-link" data-toggle="modal" data-target=".fusion-modal.form-market" href="#">Pre-Qualify</a>
</div>
</div>

编辑以包含@freedomn-m 的建议，但数据属性返回空白：

jQuery(document).ready(function ($) { //replaces all instances of $ with jquery for Wordpress
    $(".unit-rate-mapped div").each(function () {
        if ($(this).is(':contains("mk")')) { //Only Market Rate units codes will contain mk
            $(this).html('Market Rate'); //Change the HTML value to Market Rate
            $(this).css({ "background": "rgba(4,57,99,.1)", "color": "#043963" });
            $('#unit-qual-link').data('target', '.fusion-modal.form-market'); //modify the data-target attribute of the pre-Qualify link to link to the market form
            //document.getElementById("unit-qual-link").dataset.target = ".fusion-modal.form-market"; 
        } else { //Anything and everything else goes to orange
            $(this).html('Affordable'); //Change the HTML value to Affordable
            $(this).css({ "background": "rgba(229,104,53,.1)", "color": "#e56835" }); //Change the background color and type to orange
            $('#unit-qual-link').data('target', '.fusion-modal.form-affordable'); //modify the data-target attribute of the pre-Qualify link to link to the afforrdable form
            //document.getElementById("unit-qual-link").dataset.target = ".fusion-modal.form-affordable"; //modify the URL of the Pre-Qualify link to link to the affordable form
        }
    });
//Tried this variation as well
    // if ($(".unit-rate-mapped div:contains('Market Rate')")) {
    //     $('#unit-qual-link').attr('data-target', '.fusion-modal.form-market');
    // } else {
    //     $('#unit-qual-link').attr('data-target', '.fusion-modal.form-affordable');
    // }
});

空白数据目标的结果：

<a id="unit-qual-link" class="fusion-modal-text-link" data-toggle="modal" data-target="" href="#" data-uw-styling-context="true">Pre-Qualify</a>

标签： javascriptjquery

解决方案

好吧，我找到了解决方案。简而言之，我在 HTML 层次结构中进行逻辑调用为时已晚。我没有正确针对.unit-rate-map班级的孩子，因为它没有孩子。这是清理后的 HTML 以供参考：

<!--Market Example-->
<div class="essential-grid-unit-row-grid row-1">
  <div class="unit-rate-mapped">
    <div class="unit-rate-map">mk1234</div>
  </div>

  <div class="unit-qualifications">
    <a class="fusion-modal-text-link unit-qual-link" data-toggle="modal" data-target=".fusion-modal.form-affordable" href="#">Pre-Qualify</a>
  </div>
</div>

<!--Affordable Examples-->
<div class="essential-grid-unit-row-grid row-1">
  <div class="unit-rate-mapped">
    <div class="unit-rate-map">1b1b60</div>
  </div>

  <div class="unit-qualifications">
    <a class="fusion-modal-text-link unit-qual-link" data-toggle="modal" data-target=".fusion-modal.form-affordable" href="#">Pre-Qualify</a>
  </div>
</div>
<div class="essential-grid-unit-row-grid row-1">
  <div class="unit-rate-mapped">
    <div class="unit-rate-map">2b1b60</div>
  </div>

  <div class="unit-qualifications">
    <a class="fusion-modal-text-link unit-qual-link" data-toggle="modal" data-target=".fusion-modal.form-affordable" href="#">Pre-Qualify</a>
  </div>
</div>
<div class="essential-grid-unit-row-grid row-1">
  <div class="unit-rate-mapped">
    <div class="unit-rate-map">3b1b60</div>
  </div>

  <div class="unit-qualifications">
    <a class="fusion-modal-text-link unit-qual-link" data-toggle="modal" data-target=".fusion-modal.form-affordable" href="#">Pre-Qualify</a>
  </div>
</div>

<!--Market Example-->
<div class="essential-grid-unit-row-grid row-1">
  <div class="unit-rate-mapped">
    <div class="unit-rate-map">mk12345</div>
  </div>

  <div class="unit-qualifications">
    <a class="fusion-modal-text-link unit-qual-link" data-toggle="modal" data-target=".fusion-modal.form-affordable" href="#">Pre-Qualify</a>
  </div>
</div>

<!--Affordable Example-->
<div class="essential-grid-unit-row-grid row-1">
  <div class="unit-rate-mapped">
    <div class="unit-rate-map">1b1b60</div>
  </div>

  <div class="unit-qualifications">
    <a class="fusion-modal-text-link unit-qual-link" data-toggle="modal" data-target=".fusion-modal.form-affordable" href="#">Pre-Qualify</a>
  </div>
</div>

以及相应的 JQuery：

jQuery(document).ready(function ($) { //replaces all instances of $ with jquery for Wordpress
    $(".essential-grid-unit-row-grid").each(function () {
        if ($(this).find(".unit-rate-map").is(':contains("mk")')) { //Only Market Rate units codes will contain mk
            $(this).find(".unit-rate-map").html('Market Rate'); //Change the HTML value to Market Rate
            $(this).find(".unit-rate-map").css({ "background": "rgba(4,57,99,.1)", "color": "#043963" });
            $(this).find(".unit-qual-link").attr("data-target", ".fusion-modal.form-market");
        } else { //Anything and everything else goes to orange
            $(this).find(".unit-rate-map").html('Affordable'); //Change the HTML value to Affordable
            $(this).find(".unit-rate-map").css({ "background": "rgba(229,104,53,.1)", "color": "#e56835" }); //Change the background color and type to orange

        }
    });
});

我有针对性.essential-grid-unit-row-grid，然后用来在循环$(this).find()中调用该类的特定子级。.each()

这是一个工作小提琴：https ://jsfiddle.net/3mqhudca/4/

推荐阅读