时间戳

首页 > 解决方案 > DOM createElement() 动态地与点击事件到 div 特定的 url 元素

javascript - DOM createElement() 动态地与点击事件到 div 特定的 url 元素

问题描述

我正在尝试构建一个动态包含有关商店分支位置信息的 9 个 div（卡片）。每张卡片都有一个与之关联的唯一 URL，该 URL 链接到每个分支的特定 URL。

这种方法在函数中将第一个 (0) URL 附加到所有卡片：

$("div").click(function() {
    window.location = $(this).find("a").attr("href"); 
    return false;
});

这种方法将最后一个 URL (8) 附加到所有卡片：

branch.addEventListener("click", function(e){
    e.preventDefault();
    window.open(prop.pages_url);   
})

我正在使用的代码：

function buildLocationList(data) {
  for (i = 0; i < 9; i++) {
    var currentFeature = data.features[i];
    var prop = currentFeature.properties;

    //Create Card
    var branches = document.getElementById('branches');
    var url = branches.appendChild(document.createElement('a');
        url.setAttribute('href', prop.pages_url);
    )
    var branch = branches.appendChild(document.createElement('div'));
        branch.className = 'card';
        branch.id = "branch-" + i;
        branch.url = prop.pages_url;

        branch.addEventListener("click", function(e){
            e.preventDefault();
            window.open(prop.pages_url);

          })  
    //Append Branch Card Details
    v
    var company = branch.appendChild(document.createElement('h5'));
      company.innerHTML = prop.name + '<br />';
    var distancePhone = branch.appendChild(document.createElement('p'));
        if (prop.distance) {
          var roundedDistance = Math.round(prop.distance * 100) / 100;
          distancePhone.innerHTML = '<span class="miles">Approx. ' + roundedDistance + ' miles</span>' + '<span class="location-phone">' + prop.phone_number + '</span>';
        }
        else {
          distancePhone.innerHTML = prop.phone_number;
        }
    var address = branch.appendChild(document.createElement('p'));
        if (prop.address_line_2) {
          address.innerHTML += prop.address_line_1 + ', ' + prop.address_line_2 + '<br />';
        }
        else {
          address.innerHTML += prop.address_line_1 + '<br />';
        };
        address.innerHTML += prop.address_city + ', ' + prop.address_state + ' ' +prop.address_postal_code  + '</p>';
  }
}

我希望卡片可以通过重定向到每个分支的唯一 URL 来点击。

标签： javascript

解决方案

您将 URL 存储在 card 元素上：

branch.url = prop.pages_url

在点击处理程序中您需要做的就是访问该属性：

branch.addEventListener("click", function(e){
    e.preventDefault();
    window.open(e.currentTarget.url);
})

在事件处理程序的上下文中，e.currentTarget是处理程序附加到的元素。如果您对触发事件的元素感兴趣，您可以使用e.target.

这是您在下面修改的代码片段。由于沙盒 iframe，我认为链接不会在此处打开。

function buildLocationList(data) {
  for (i = 0; i < data.features.length; i++) {
    var currentFeature = data.features[i];
    var prop = currentFeature.properties;

    //Create Card
    var branches = document.getElementById('branches');
    var url = branches.appendChild(document.createElement('a'));
        url.setAttribute('href', prop.pages_url);
    var branch = branches.appendChild(document.createElement('div'));
        branch.className = 'card';
        branch.id = "branch-" + i;
        branch.url = prop.pages_url;

        branch.addEventListener("click", function(e){
            e.preventDefault();
            console.log(e.currentTarget.url);
            window.open(e.currentTarget.url);
        })  
    //Append Branch Card Details
    var company = branch.appendChild(document.createElement('h5'));
        company.innerHTML = prop.name + '<br />';
    var distancePhone = branch.appendChild(document.createElement('p'));
        if (prop.distance) {
          var roundedDistance = Math.round(prop.distance * 100) / 100;
          distancePhone.innerHTML = '<span class="miles">Approx. ' + roundedDistance + ' miles</span>' + '<span class="location-phone">' + prop.phone_number + '</span>';
        }
        else {
          distancePhone.innerHTML = prop.phone_number;
        }
    var address = branch.appendChild(document.createElement('p'));
        if (prop.address_line_2) {
          address.innerHTML += prop.address_line_1 + ', ' + prop.address_line_2 + '<br />';
        }
        else {
          address.innerHTML += prop.address_line_1 + '<br />';
        };
        address.innerHTML += prop.address_city + ', ' + prop.address_state + ' ' +prop.address_postal_code  + '</p>';
  }
}

buildLocationList({features:[{
  properties: {
    distance: 100,
    name: 'Google',
    pages_url: 'https://www.google.com',
    phone_number: '123-456-7890',
    address_line_1: '1234 Street',
    address_city: 'Citytown',
    address_state: 'State',
    address_postal_code: '12345'
  }
},{
  properties: {
    distance: 200,
    name: 'Microsoft',
    pages_url: 'https://www.microsoft.com',
    phone_number: '123-456-7890',
    address_line_1: '1234 Street',
    address_city: 'Citytown',
    address_state: 'State',
    address_postal_code: '12345'
  }
}]})
.card {
  border: 1px solid #ccc;
  padding: 10px;
  max-width: 50%;
  margin: 10px;
}
<div id="branches"></div>

推荐阅读