如何用Javascript实现电话链接(How to implement telephone links with Javascript)

如何用Javascript实现电话链接(How to implement telephone links with Javascript)

我正在使用WordPress主题，这是我想要实现的功能：

<a href="tel:225-1077">225-1077</a>

它确实很容易用HTML完成，但我对WordPress真的不太好，我得到的这个主题有很多文件，很难找到我应该编辑的地方但是，主题允许你添加自定义JS所以我想知道是否上面的功能可以用JS完成。

很感谢任何形式的帮助！

I am working with a WordPress theme and this is the functionality that I am trying to achieve:

<a href="tel:225-1077">225-1077</a>

It sure is easily done with HTML but I am really not good with WordPress and this theme I got has so much files in it that it's hard to find where I should edit however, the theme allows you to add custom JS so I was wondering if the functionality above can be done with JS.

Any help is very much appreciated!

最满意答案

非常简单，这是可能的，但这并不意味着这是一个好主意。 跨手机的JS支持不一致，甚至不总是启用，这意味着这些人永远不会看到你的链接。

使用JS创建链接很简单：

var cta = document.createElement('a'); cta.href = 'tel:12341234'; cta.setAttribute('class', 'my cta classes'); cta.appendChild(document.createTextNode('1234-1234'));

然后你需要把它放在页面上的某个地方。 如果我们在具有特定类的地方有<div> ，我们可以使用：

这是我们的HTML

<div class="target-cta">This div should receive a link</div> <div class=""> this one shouldn't </div> <div class="target-cta"> should have one here </div> <div class=""> ...though not here</div> <div class="target-cta">and finally, one here:</div>

我们的JS插入链接应循环遍历这些元素，创建链接并插入它们：

var targets = document.getElementsByClassName('target-cta'), target, i, cta; // Call To Action for (i = 0; i < targets.length; i++) { target = targets[i]; cta = document.createElement('a'); cta.href = 'tel:12341234'; cta.setAttribute('class', 'my cta classes'); cta.appendChild(document.createTextNode('1234-1234')); target.appendChild(cta); };

    var targets = document.getElementsByClassName('target-cta'),
        target, i, cta;

    for (i = 0; i < targets.length; i++) {

        target = targets[i];
        cta = document.createElement('a');

        cta.href = 'tel:12341234';
        cta.setAttribute('class', 'my cta classes');
        cta.appendChild(document.createTextNode('1234-1234'));

        target.appendChild(cta);
    }; 
  
<div class="target-cta">This div should receive a link</div>
<div class=""> this one shouldn't </div>
<div class="target-cta"> should have one here </div>
<div class=""> ...though not here</div>
<div class="target-cta">and finally, one here:</div> 
  
 
Very simply, it is possible, but that doesn't mean it's a good idea. JS support across mobile phones is not consistent, and not even always enabled, which would mean that these people would never see your link.
 
To create the link with JS is simple :
 
var cta = document.createElement('a');

cta.href = 'tel:12341234';
cta.setAttribute('class', 'my cta classes');
cta.appendChild(document.createTextNode('1234-1234'));
 
and then you need to put it somewhere on the page. If we have <div>s all over the place with a specific class, we can use that:
 
This is our HTML
 
<div class="target-cta">This div should receive a link</div>
<div class=""> this one shouldn't </div>
<div class="target-cta"> should have one here </div>
<div class=""> ...though not here</div>
<div class="target-cta">and finally, one here:</div>
 
and our JS to insert the links should loop through these elements, creating the links and inserting them as it goes:
 
var targets = document.getElementsByClassName('target-cta'),
    target, 
    i, 
    cta; // Call To Action

for (i = 0; i < targets.length; i++) {

    target = targets[i];
    cta = document.createElement('a');

    cta.href = 'tel:12341234';
    cta.setAttribute('class', 'my cta classes');
    cta.appendChild(document.createTextNode('1234-1234'));

    target.appendChild(cta);
};
 
 
 
  
  
    var targets = document.getElementsByClassName('target-cta'),
        target, i, cta;

    for (i = 0; i < targets.length; i++) {

        target = targets[i];
        cta = document.createElement('a');

        cta.href = 'tel:12341234';
        cta.setAttribute('class', 'my cta classes');
        cta.appendChild(document.createTextNode('1234-1234'));

        target.appendChild(cta);
    }; 
  
<div class="target-cta">This div should receive a link</div>
<div class=""> this one shouldn't </div>
<div class="target-cta"> should have one here </div>
<div class=""> ...though not here</div>
<div class="target-cta">and finally, one here:</div> 
  
 
如何用Javascript实现电话链接(How to implement telephone links with Javascript)

                
 我正在使用WordPress主题，这是我想要实现的功能： 
 
<a href="tel:225-1077">225-1077</a>
 
 它确实很容易用HTML完成，但我对WordPress真的不太好，我得到的这个主题有很多文件，很难找到我应该编辑的地方但是，主题允许你添加自定义JS所以我想知道是否上面的功能可以用JS完成。 
 
 很感谢任何形式的帮助！ 
I am working with a WordPress theme and this is the functionality that I am trying to achieve:
 
<a href="tel:225-1077">225-1077</a>
 
It sure is easily done with HTML but I am really not good with WordPress and this theme I got has so much files in it that it's hard to find where I should edit however, the theme allows you to add custom JS so I was wondering if the functionality above can be done with JS. 
 
Any help is very much appreciated!
                
最满意答案
                
                    
                        
 非常简单，这是可能的，但这并不意味着这是一个好主意。 跨手机的JS支持不一致，甚至不总是启用，这意味着这些人永远不会看到你的链接。 
 
 使用JS创建链接很简单： 
 
var cta = document.createElement('a');

cta.href = 'tel:12341234';
cta.setAttribute('class', 'my cta classes');
cta.appendChild(document.createTextNode('1234-1234'));
 
 然后你需要把它放在页面上的某个地方。 如果我们在具有特定类的地方有<div> ，我们可以使用： 
 
 这是我们的HTML 
 
<div class="target-cta">This div should receive a link</div>
<div class=""> this one shouldn't </div>
<div class="target-cta"> should have one here </div>
<div class=""> ...though not here</div>
<div class="target-cta">and finally, one here:</div>
 
 我们的JS插入链接应循环遍历这些元素，创建链接并插入它们： 
 
var targets = document.getElementsByClassName('target-cta'),
    target, 
    i, 
    cta; // Call To Action

for (i = 0; i < targets.length; i++) {

    target = targets[i];
    cta = document.createElement('a');

    cta.href = 'tel:12341234';
    cta.setAttribute('class', 'my cta classes');
    cta.appendChild(document.createTextNode('1234-1234'));

    target.appendChild(cta);
};
 
 
 
  
  
    var targets = document.getElementsByClassName('target-cta'),
        target, i, cta;

    for (i = 0; i < targets.length; i++) {

        target = targets[i];
        cta = document.createElement('a');

        cta.href = 'tel:12341234';
        cta.setAttribute('class', 'my cta classes');
        cta.appendChild(document.createTextNode('1234-1234'));

        target.appendChild(cta);
    }; 
  
<div class="target-cta">This div should receive a link</div>
<div class=""> this one shouldn't </div>
<div class="target-cta"> should have one here </div>
<div class=""> ...though not here</div>
<div class="target-cta">and finally, one here:</div> 
  
 
Very simply, it is possible, but that doesn't mean it's a good idea. JS support across mobile phones is not consistent, and not even always enabled, which would mean that these people would never see your link.
 
To create the link with JS is simple :
 
var cta = document.createElement('a');

cta.href = 'tel:12341234';
cta.setAttribute('class', 'my cta classes');
cta.appendChild(document.createTextNode('1234-1234'));
 
and then you need to put it somewhere on the page. If we have <div>s all over the place with a specific class, we can use that:
 
This is our HTML
 
<div class="target-cta">This div should receive a link</div>
<div class=""> this one shouldn't </div>
<div class="target-cta"> should have one here </div>
<div class=""> ...though not here</div>
<div class="target-cta">and finally, one here:</div>
 
and our JS to insert the links should loop through these elements, creating the links and inserting them as it goes:
 
var targets = document.getElementsByClassName('target-cta'),
    target, 
    i, 
    cta; // Call To Action

for (i = 0; i < targets.length; i++) {

    target = targets[i];
    cta = document.createElement('a');

    cta.href = 'tel:12341234';
    cta.setAttribute('class', 'my cta classes');
    cta.appendChild(document.createTextNode('1234-1234'));

    target.appendChild(cta);
};
 
 
 
  
  
    var targets = document.getElementsByClassName('target-cta'),
        target, i, cta;

    for (i = 0; i < targets.length; i++) {

        target = targets[i];
        cta = document.createElement('a');

        cta.href = 'tel:12341234';
        cta.setAttribute('class', 'my cta classes');
        cta.appendChild(document.createTextNode('1234-1234'));

        target.appendChild(cta);
    }; 
  
<div class="target-cta">This div should receive a link</div>
<div class=""> this one shouldn't </div>
<div class="target-cta"> should have one here </div>
<div class=""> ...though not here</div>
<div class="target-cta">and finally, one here:</div>