完整代码

Question

我需要“修改popups.js和popups.html文件，以便只有具有特定类值的链接才会触发createPopup（）函数。”我该怎么做呢？我是一个完全初学者学习javascipt，我不知道它的要求以及如何做到这一点。

/*Modify popups.js and .html so that only links with a specific class value 
trigger the createPopup() function*/

function createPopup(e) {
    'use strict';
    
    // Get the event object:
    if (typeof e == 'undefined') var e = window.event;

    // Get the event target:
    var target = e.target || e.srcElement;

    // Create the window:
    var popup = window.open(target.href, 'PopUp', 'height=100,width=100,top=100,left=100,location=no,resizable=yes,scrollbars=yes');
    
    // Give the window focus if it's open:
    if ( (popup !== null) && !popup.closed) {
        popup.focus();
        return false; // Prevent the default behavior.
    } else { // Allow the default behavior.
        return true;
    }
    
} // End of createPopup() function.

// Establish functionality on window load:
window.onload = function() {
    'use strict';
    
    // Add the click handler to each link:
    for (var i = 0, count = document.links.length; i < count; i++) {
        document.links[i].onclick = createPopup;
    } // End of for loop.

}; // End of onload function.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Popup Windows</title>
    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
</head>
<body>
    <!-- Script 9.4 - popups.html -->
    <p><a href="popupB.html" id="link" target="PopUp">B Link</a> (Will open in a new window.)</p>
    <p><a href="popupA.html" id="link" target="PopUp">A Link</a> (Will open in a new window.)</p>
    <script src="js/popups.js"></script>
</body>
</html>

Answer 1

你可以为那些会触发弹出窗口的链接添加一个特定的类。

更改HTML，删除重复的id＆amp;添加一个公共类

<p><a href="popupB.html" id="link_1" class = 'pop' target="PopUp">B Link</a> (Will open in a new window.)</p>

<p><a href="popupA.html" id="link_2" class = "pop" target="PopUp">A Link</a> (Will open in a new window.)</p>

现在，您可以使用document.querySelectorAll来获取具有特定类的元素。你也可以document.getElementsByClassName

var getLink = document.querySelectorAll（＆＃39; .pop＆＃39;）

然后使用循环向其添加事件

for (var i = 0, count = getLink.length; i < count; i++) {
        getLink[i].onclick = createPopup;
    }

未经测试，但您可以尝试一下。希望这个片段有用

Answer 2

document.links[i].onclick = createPopup;

该行应该变成：

var link = document.links[i]
if (link.classList.contains('link'))
   document.links[i].onclick = createPopup;

当然，您需要更新HTML：

<a href="popupB.html" id="link" target="PopUp">

ID只应在HTML中显示一次（您的<a>每个都具有相同的ID）

将您的id更改为class以修复该问题：

<a href="popupB.html" class="link" target="PopUp">

完整代码

＆＃13;

/*Modify popups.js and .html so that only links with a specific class value 
trigger the createPopup() function*/

function createPopup(e) {
  'use strict';
  
  // Get the event object:
  if (typeof e == 'undefined') var e = window.event;

  // Get the event target:
  var target = e.target || e.srcElement;

  // Create the window:
  var popup = window.open(target.href, 'PopUp','height=100,width=100,top=100,left=100,location=no,resizable=yes,scrollbars=yes');

  if (!popup)
    console.log('Error:', "popup doesn't exist");

  // Give the window focus if it's open:
  if (popup && (popup !== null) && !popup.closed) {
    popup.focus();
    return false; // Prevent the default behavior.
  } else { // Allow the default behavior.
    return true;
  }

} // End of createPopup() function.

// Establish functionality on window load:
window.onload = function() {
  'use strict';

  // Add the click handler to each link:
  for (var i = 0, count = document.links.length; i < count; i++) {
    var link = document.links[i];
    if (link.classList.contains('link')){
       link.onclick = createPopup;
       }
  } // End of for loop.

}; // End of onload function.

＆＃13;

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Popup Windows</title>
  <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
</head>

<body>
  <!-- Script 9.4 - popups.html -->
  <p><a href="popupB.html" class="link" target="PopUp">B Link</a> (Will open in a new window.)</p>
  <p><a href="popupA.html" class="link" target="PopUp">A Link</a> (Will open in a new window.)</p>
  <script src="js/popups.js"></script>
</body>

</html>

＆＃13;

Answer 3

您可以使用dom的className属性来检查需要触发弹出功能的类名

for (var i = 0, count = document.links.length; i < count; i++) {
    if(document.links[i].className=="required_className")
     document.links[i].onclick = createPopup;
}

如何修改以便具有特定类值的链接触发使用JavaScript / HTML的弹出功能？

3 个答案:

完整代码