时间戳

首页 > 解决方案 > jQuery 是否有通配符结尾

jquery - jQuery 是否有通配符结尾

问题描述

我有一个 jQuery 脚本，当用户从下拉框中选择时，它会更改两个 href 链接。

<script>
    $(document).ready(function () {
        $(":input[id*='ddlAttributes']").change(function (event) {
            var masterNumber = $(this)[0].firstElementChild.value;
            var itemNumber = $(this).val();
            $("a[href$=" + masterNumber + "]").each(function() {
                this.href = this.href.replace(masterNumber, itemNumber);
            });
        });
    });
</script>

编辑：添加了 html

<div class="row">
        <div class="col-xs-12 col-md-9">
            <div class="products">

                        <div class="row">

                        <div class="col-md-6 product">

                            <div class="row">
                                <div class="col-xs-6">
                                    <a href='/Product.aspx?Product=BR3001'>
                                        <img src='/Handler.ashx?id=BR3001' />
                                    </a>
                                </div>
                                <div class="col-xs-6">
                                    <h4>
                                        <a href='/Product.aspx?Product=BR3001'>
                                            BR3001
                                        </a>
                                    </h4>
                                    <p>
                                        BR T-ZONE BLACK/SILVER 4.5 [W6]
                                    </p>
                                    <h3 class="text-right">
                                        $0.00
                                    </h3>
                                    <div class="col-xs-6" style=''>
                                        <select name="ctl00$ContentPlaceHolder$rptProducts$ctl01$ddlAttributes" id="ContentPlaceHolder_rptProducts_ddlAttributes_0">
    <option value="BR3001">Size</option>
    <option value="BR3001-045">4-1/2</option>
    <option value="BR3001-050">5</option>
    <option value="BR3001-055">5-1/2</option>
    <option value="BR3001-060">6</option>
    <option value="BR3001-065">6-1/2</option>
    <option value="BR3001-070">7</option>
    <option value="BR3001-075">7-1/2</option>
    <option value="BR3001-080">8</option>
    <option value="BR3001-085">8-1/2</option>
    <option value="BR3001-090">9</option>
    <option value="BR3001-095">9-1/2</option>
    <option value="BR3001-100">10</option>
    <option value="BR3001-105">10-1/2</option>
    <option value="BR3001-110">11</option>
    <option value="BR3001-115">11-1/2</option>
    <option value="BR3001-120">12</option>
    <option value="BR3001-130">13</option>
    <option value="BR3001-140">14</option>
    <option value="BR3001-150">15</option>

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

                        </div>

这在下拉框第一次更改时有效。但不是在连续更改时，因为链接已经更改，现在不会与结尾匹配。

主编号是这样的：BR3001

具体项目编号如：BR3001-045、BR3001-050、BR3001-055 等。

我试图让脚本在连续的选择更改上工作。任何帮助将不胜感激。提前致谢。

标签： jqueryasp.net

解决方案

我想我明白你在这里想要做什么。可能有更好的方法来使用选择器和 JQuery 来做你想做的事情。我在您的 html 中添加了一些类和 Id 选择器并稍微更改了 jquery。请参阅下面示例中的注释以了解使用选择器的另一种方式。

$(document).ready(function () {
        $(":input[id*='ddlAttributes']").change(function (event) {
            var linkText = "/Product.aspx?Product=";
            var imageSrcBase = "/Handler.ashx?id=";
            var itemNumber = $(this).val();
            
            //Set the actual href of the links using class selector
            $(".productLink").attr("href", linkText + itemNumber);
            
            //Set the img src
            $("#imgLink").attr("src", imageSrcBase + itemNumber);
            
            //Set the link text using itme number
            $("#numLink").text(itemNumber);
        });
    });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
    <div class="col-xs-12 col-md-9">
        <div class="products">
            <div class="row">
                <div class="col-md-6 product">
                    <div class="row">
                      <div class="col-xs-6">
                          <a href='/Product.aspx?Product=BR3001' class="productLink">
                              <img src='/Handler.ashx?id=BR3001' id="imgLink" />
                          </a>
                      </div>
                      <div class="col-xs-6">
                          <h4>
                              <a href='/Product.aspx?Product=BR3001' id="numLink" class="productLink">
                                  BR3001
                              </a>
                          </h4>
                          <p>
                              BR T-ZONE BLACK/SILVER 4.5 [W6]
                          </p>
                          <h3 class="text-right">
                              $0.00
                          </h3>
                          <div class="col-xs-6" style=''>
                              <select name="ctl00$ContentPlaceHolder$rptProducts$ctl01$ddlAttributes" id="ContentPlaceHolder_rptProducts_ddlAttributes_0">
    <option value="BR3001">Size</option>
    <option value="BR3001-045">4-1/2</option>
    <option value="BR3001-050">5</option>
    <option value="BR3001-055">5-1/2</option>
    <option value="BR3001-060">6</option>
    <option value="BR3001-065">6-1/2</option>
    <option value="BR3001-070">7</option>
    <option value="BR3001-075">7-1/2</option>
    <option value="BR3001-080">8</option>
    <option value="BR3001-085">8-1/2</option>
    <option value="BR3001-090">9</option>
    <option value="BR3001-095">9-1/2</option>
    <option value="BR3001-100">10</option>
    <option value="BR3001-105">10-1/2</option>
    <option value="BR3001-110">11</option>
    <option value="BR3001-115">11-1/2</option>
    <option value="BR3001-120">12</option>
    <option value="BR3001-130">13</option>
    <option value="BR3001-140">14</option>
    <option value="BR3001-150">15</option>

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

                        </div>

推荐阅读