Question

因此，我正在制作一个包含可点击图片的网站，这些图片可链接到youtube.com等链接。我想为所有链接设置1个函数，所以我想出了将变量名放在data-id中，然后尝试运行该变量的方法。

有什么想法为什么行不通？

它确实打印$ youtube，但是我该如何使用该打印变量。

     $(document).ready(function(){

    $youtube = "https://www.youtube.com/";
    $gmail = "";


    $(".linkicon").click(function(){
        $element = "$"+ $(this).data("id");
        window.open($element,"_self");
    });

    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="linkicon" data-id="youtube">
        <img class="linkimg" src="assets/img/youtube.png">
        <p class="text-center white">YouTube</p>

    </div>

Answer 1

问题是因为您无法以尝试的方式动态访问变量。

要解决此问题，您可以将data-id存储为对象的键，并使用URL作为值。然后，您可以使用方括号表示法访问对象，如下所示：

$(document).ready(function() {
  var links = {
    youtube: 'https://www.youtube.com/',
    gmail: ''
  }

  $(".linkicon").click(function() {
    var $element = links[$(this).data("id")];
    window.open($element, "_self");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="linkicon" data-id="youtube">
  <img class="linkimg" src="assets/img/youtube.png">
  <p class="text-center white">YouTube</p>
</div>

但是，您应该注意，根据可访问性准则，此方法完全不兼容，因为您使用div作为触发动作的元素。

还要注意，JS变量上的$前缀通常用于表示该值是jQuery对象，而不是字符串。

通过获取data-id创建的运行变量

1 个答案: