переменная, созданная путем взятия идентификатора данных

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, а не строкой.