将 Onclick 参数替换为 img src 路径的一部分

Question

您好，我是 Greasemonkey 和 JavaScript 世界的新手..

我想将每个 onclick 函数替换为其相关的 img src 链接的一部分

源代码如下：

<div id="playlist_container">
                    <div id="video_container" onclick="playvid('a1a1a1a1a1',3201)" class="playing">
                <div id="thumbnail">
                                                <img src="https://.../thumb/ABCD.jpg">
                                            </div>
                <div id="title"></div>
                <div id="synopsis">
                    Vid 1                    </div>
            </div>
            <hr>
                    <div id="video_container" onclick="playvid('b2b2b2b2bb2',3202)" >
                <div id="thumbnail">
                                                <img src="https://.../thumb/EFGH.jpg">
                                            </div>
                <div id="title"></div>
                <div id="synopsis">
                    Vid 2                    </div>
            </div>

我想用部分 img src 链接替换 ​​onclick 'playvid' a1a1a1a1a1 & b2b2b2b2bb2 & c3c3c3c3c3c3 ...

变成这样：

<div id="playlist_container">
                    <div id="video_container" onclick="playvid('ABCD',3201)" class="playing">
                <div id="thumbnail">
                                                <img src="https://.../thumb/ABCD.jpg">
                                            </div>
                <div id="title"></div>
                <div id="synopsis">
                    Vid 1                    </div>
            </div>
            <hr>
                    <div id="video_container" onclick="playvid('EFGH',3202)" >
                <div id="thumbnail">
                                                <img src="https://.../thumb/EFGH.jpg">
                                            </div>
                <div id="title"></div>
                <div id="synopsis">
                    Vid 2                    </div>
            </div>

这是我迄今为止尝试过的：

          var els = $("#playlist_container");
          var cod = $("div#thumbnail img").prop("src").replace(/(https(.+)\/thumb\/|.jpg)/gi, '');
          for(var i=0;i<els.length;i++){
          var el = els[i];
          el.innerHTML = el.innerHTML.replace(/playvid(.)(.)(\w+)(.)/gi, "playvideo('" + cod +"'");
          }

这对我有用，但问题是它将第一个 cod 'ABCD' 放在所有以下 'playvid()' 函数中，如下所示：

<div id="playlist_container">
                    <div id="video_container" onclick="playvid('ABCD',3201)" class="playing">
                <div id="thumbnail">
                                                <img src="https://.../thumb/ABCD.jpg">
                                            </div>
                <div id="title"></div>
                <div id="synopsis">
                    Vid 1                    </div>
            </div>
            <hr>
                    <div id="video_container" onclick="playvid('ABCD',3202)" >
                <div id="thumbnail">
                                                <img src="https://.../thumb/EFGH.jpg">
                                            </div>
                <div id="title"></div>
                <div id="synopsis">
                    Vid 2                    </div>
            </div>

另一个问题是当我尝试 $("#video_container") 时它不起作用我不知道为什么，我很困惑，找不到任何东西

Answer 1

您的 html 具有重复的 ID 值，这可能会导致在查找正确元素时出现问题。如果您想定位多个元素，请尝试使用类。

这段代码只获取第一个元素的值

var cod = $("div#thumbnail img").prop("src").replace(/(https(.+)\/thumb\/|.jpg)/gi, '');

试试这个代码，让我知道它是怎么回事

var images = $("div.thumbnail img");
      
images.each(function(img) {
  var name = $(this).prop("src").replace(/(https(.+)\/thumb\/|.jpg)/gi, '');
  var container = this.closest("div.video_container");
  var evt = $(container).attr("onclick").replace(/playvid(.)(.)(\w+)(.)/gi, "playvideo('" + name +"'");
  $(container).attr("onclick", evt);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="playlist_container">
  <div class="video_container" onclick="playvid('a1a1a1a1a1',3201)" class="playing">
    <div class="thumbnail">
      <img src="https://.../thumb/ABCD.jpg">
    </div>
    <div class="title"></div>
    <div class="synopsis">Vid 1</div>
  </div>
  <hr>
  <div class="video_container" onclick="playvid('b2b2b2b2bb2',3202)" >
    <div class="thumbnail">
      <img src="https://.../thumb/EFGH.jpg">
    </div>
    <div class="title"></div>
    <div class="synopsis">Vid 2</div>
  </div>