jQuery是否有通配符endswith

时间：2019-01-25 20:21:07

标签： jquery asp.net

我有一个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等。

我正在尝试使脚本可用于连续的选择更改。任何帮助将不胜感激。预先感谢。

3 个答案:

答案 0 :(得分：1)

我想我明白您在这里想要做什么。尽管可以使用选择器和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>

答案 1 :(得分：1)

您可以使用包含选择器[name*=”value”]的属性。

http://api.jquery.com/attribute-contains-selector/

此外，您也不想将masterNumber替换为itemNumber。而是将链接的href值设置为itemNumber。

请参见下面的更新脚本示例：

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

答案 2 :(得分：1)

您可以使用.filter()和正则表达式模式：

var regex = new RegExp(masterNumber + '.*$')
$("a").filter((idx, ele) => regex.test(ele.href))

改进：

代替：

var masterNumber = $(this)[0].firstElementChild.value;
var itemNumber = $(this).val();

您可以简单地：

var masterNumber = this.options[0].value;
var itemNumber = this.value;


$(":input[id*='ddlAttributes']").change(function (event) {
    var masterNumber = this.options[0].value;
    var itemNumber = this.value;
    var regex = new RegExp(masterNumber + '.*$')
    $("a").filter((idx, ele) => regex.test(ele.href))
             .each(function() {
        this.href = this.href.replace(masterNumber, itemNumber);
        if (this.text.trim() != '') {
            this.text = itemNumber;
        }
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.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'>
                                <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>
        </div>
    </div>
</div>

相关问题
最新问题