主页 / coding / 问题 / 76928947
Accepted
Faz2Music.ir
Asked: 2023-08-18 19:32:39 +0800 CST

用按钮替换多个链接

  • 772

我有一个代码可以用给定的 id 替换链接的 url

我希望此代码适用于具有相同指定 id 或类的多个链接和播放器

我有一个按钮应该一起改变

你能指导我或帮助我吗？

$(document).ready(function(){
$('#change').on('click', function(e) {
 var purl = $("#urlchange").attr("href");
purl = purl .replace("dl.faz2music.ir", "up.faz2music.ir");
 $("#urlchange").attr("href",purl);
notice.showToast({text: 'Links converted',type: 'success',showClose: true});
});
});

<button id="change" class="ltr">change link's</button>

<a href="https://dl.faz2music.ir/download/3712434/Ahmad Solo - Shazdeh Pesar [320].mp3"  id="urlchange">Download</a>
<a href="https://dl.faz2music.ir/download/3712434/Ahmad Solo - Shazdeh Pesar [128].mp3"  id="urlchange">Download</a>

<audio><source type="audio/mp3" src="https://dl.faz2music.ir/download/3712434/Ahmad Solo - Shazdeh Pesar [320].mp3" id="urlchange"></audio>
<audio><source type="audio/mp3" src="https://dl.faz2music.ir/download/3712434/Ahmad Solo - Shazdeh Pesar [128].mp3" id="urlchange"></audio>

此代码仅替换一个链接

我希望能够对具有相同 ID 或类的多个链接执行相同的操作

jQuery

jquery

3 个回答

  1. Best Answer

    使用每个类：

    $(document).ready(function() {
  $('#change').on('click', function(e) {
    const from = "dl.faz2music.ir";
    const to = "up.faz2music.ir";
    $(".urlchange").each(function() {
      if (this.matches("source")) {
        console.log()
        this.setAttribute("src", this.getAttribute("src").replace(from,to))
      }  
      else this.href = this.href.replace(from,to);
    });
    /*
    notice.showToast({
      text: 'Links converted',
      type: 'success',
      showClose: true
    });
    */
    alert("Links changed");
  });
  $("audio").on("mouseenter", (e) => console.log(e.target.querySelector("source").getAttribute("src")))
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<button type="button" id="change">Change</button>

<a href="https://dl.faz2music.ir/download/3712434/Ahmad Solo - Shazdeh Pesar [320].mp3" class="urlchange">Download</a>
<a href="https://dl.faz2music.ir/download/3712434/Ahmad Solo - Shazdeh Pesar [320].mp3" class="urlchange">Download</a>
<a href="https://dl.faz2music.ir/download/3712434/Ahmad Solo - Shazdeh Pesar [320].mp3" class="urlchange">Download</a>
<hr/>
<audio controls><source type="audio/mp3" src="https://dl.faz2music.ir/download/3712434/Ahmad Solo - Shazdeh Pesar [320].mp3" class="urlchange"></audio><br/>
<audio controls>Audio<source type="audio/mp3" src="https://dl.faz2music.ir/download/3712434/Ahmad Solo - Shazdeh Pesar [128].mp3" class="urlchange"></audio>

    • 1

  2. 您需要为锚标记分配相同的类，因为您不能为多个标记分配相同的 id

     $(document).ready(function () {
        $('#change').on('click', function (e) {
            $('.urlchange').prop('href',  (i, val) => {
                return val.replace("dl.faz2music.ir", "up.faz2music.ir");
            });
           // notice.showToast({ text: 'Links converted', type: 'success', showClose: true });
        });
 });
     <script src="https://code.jquery.com/jquery-3.7.0.slim.min.js" integrity="sha256-tG5mcZUtJsZvyKAxYLVXrmjKBVLd6VpVccqz/r4ypFE=" crossorigin="anonymous"></script>

<button id="change" class="ltr">Change links</button>
<a href="https://dl.faz2music.ir/download/3712434/Ahmad Solo - Shazdeh Pesar [320].mp3" class="urlchange">Download</a>
<a href="https://dl.faz2music.ir/download/3712434/Ahmad Solo - Shazdeh Pesar [320].mp3" class="urlchange">Download</a>

    • 1

  3. 当您使用时，请注意它.attr有一个需要回调的重载：

    http://api.jquery.com/attr/#attr-attributeName-function

    .attr( attributeName, function )

    attributeName - 类型：String
    要设置的属性的名称。

    function 类型：Function( Integer index, String attr )返回String或Number
    返回要设置的值的函数。this是当前元素。接收集合中元素的索引位置和旧属性值作为参数。

    因此，结合使用其他评论/答案中建议的类，您的代码将变为：

    $(".urlchange").attr("href", (_, href) => href.replace("dl.faz2music.ir", "up.faz2music.ir"));

    更新的片段：

    $(document).ready(function() {
  $('#change').on('click', function(e) {

    $(".urlchange").attr("href", (_, href) =>
      href.replace("dl.faz2music.ir", "up.faz2music.ir"));

    console.log("urls updated");
  });
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="https://dl.faz2music.ir/download/3712434/Ahmad Solo - Shazdeh Pesar [320].mp3" class="urlchange">Download</a>
<a href="https://dl.faz2music.ir/download/3712434/Ahmad Solo - Shazdeh Pesar [128].mp3" class="urlchange">Download</a>

<button id="change" class="ltr">change links</button>

    • 0

相关问题