将 href 值更改为 popupid 不起作用

Question

我创建了一些应该打印的具有不同描述的块，因此我分别创建了所有弹出详细信息，并在加载时使用“#”制作了打印按钮，并在单击块时我试图更改 href 值到相应的popupid。单击​​打印弹出窗口时href值的此更改未显示。按照我使用的代码：

<div id ="9print">
<a class="vc_general vc_btn3 vc_btn3-size-md vc_btn3-shape-square vc_btn3-style-classic vc_btn3-color-grey" href="#" title="">PRINT</a>
</div>

点击按钮 9

$("#9print a").prop("href", "#sg-popup-id-429");

href 值正在更改为“#sg-popup-id-429”，但之后当我单击“PRINT”时弹出窗口没有显示，如果我们直接将 href 值设置为“#sg-popup-id” -429" 它工作正常

谁能帮我解决这个问题？

Answer 1

这是因为 href 属性包含的不仅仅是“#”。它包含完整的网址。您可以通过替换 url 的最后一部分来使其工作。

正则表达式/#.*/ 的工作原理如下。

• # 匹配 # 字符
• .* 匹配（几乎）任何字符 0-无限次

var currHref = $("#9print a").prop("href");
$("#9print a").prop("href", currHref.replace(/#.*/, "#sg-popup-id-429"));

//code for showing initial and new href values.
var newHref = $("#9print a").prop("href");
console.log("initial href: " + currHref);
console.log("new href: " + newHref);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id ="9print">
<a class="vc_general vc_btn3 vc_btn3-size-md vc_btn3-shape-square vc_btn3-style-classic vc_btn3-color-grey" href="#" title="">PRINT</a>
</div>

<div style="height: 2000px;"></div>

<div id="sg-popup-id-429" style="height: 100px; background-color: red">test<div>

Answer 2

首先，我会将它放在 jquery 中的 document ready function 中，这样您就不会在页面上未加载的元素上运行您尝试调用的 jQuery 函数。

$(document).ready(function(){
    $("#9print a").click(function() {
        $("#9print a").attr("href", "#sg-popup-id-429");
    });
});

这只是假设，这是您的问题 :) 如果这根本没有帮助，请显示更多代码 :)