在JavaScript或jQuery中，如何准确地抓取属性来操作活动选择器？

Question

最终，我希望用户点击“打印”或“马克杯”上图像旁边的“目标网页”。然后在订单页面上激活Print / Mug按钮，然后标记相关的图像。

所以我在Landing Page中有以下代码：

      <ul class="dropdown-menu">
    <li>
      <a href="/someurl?image=main_image.jpg&type=print active">Print</a>
    </li>
    <li>
      <a href="/someurl?image=main_image.jpg&type=mug active">Mug</a>
    </li>
  </ul>

然后在订单页面中输入以下代码：

        <div class="img-container1 image-container" image_var="main_image.jpg">
      <%= image_tag('main_image.jpg') %>
      <div class="wk-after">
        <div class="centered-wk">
          <span class="fa fa-check-circle check-circle"></span>
        </div>
        <div class="centered-wk wk-select">
          SELECTED
        </div>
      </div>
    </div>

我的思维过程是从订单页面抓取image_var属性并将其激活。

到目前为止，我一直在使用：

    <script>
  function toggleActive() {
    var activeElements = document.querySelectorAll('image_var');
    activeElements.forEach(function (el) {
      el.classList.remove('active');
    });

    btn.classList.add('active');
  }
</script>

这不起作用。我不知道抓取image_var或url参数的最佳方法是什么。我错过了什么？

我也尝试过：

<script>
      function toggleActive() {
        var activeElements = document.querySelectorAll('[image-var]');
        activeElements.forEach(function (el) {
          el.classList.remove('active');
        });

        btn.classList.add('active');
      }
    </script>

将容器上的div更新为image-var以匹配。仍未触及图像。

我觉得这应该与jQuery一起使用：

<script>
    $(function(){
      $.url.attr('image')
      $.url.attr('type')
    });
    </script>

这不是取出main_image.jpg然后是类型的打印吗？