Question

我已经为两个按钮编写了工作代码：

HTML：

<button class="OFF-LINK">OFF</button>
<button class="ON-LINK">ON</button>

<div class="box">...<a></a>...<a></a>...</div>
<div class="box">...<a></a>...<a></a>...</div>

脚本：

$(".OFF-LINK").click(function off() {
    var box = document.getElementsByClassName("box"); 
    var x; for (x = 0; x < box.length; x++) 
    {box[x].innerHTML = box[x].innerHTML.replace( /href/ig,'hren');}
}); ///links stop working

$(".ON-LINK").click(function on() {
    var box = document.getElementsByClassName("box"); 
    var y; for (y = 0; y < box.length; y++) 
    {box[y].innerHTML = box[y].innerHTML.replace( /hren/ig,'href');}
}); ///links work again

如何结合这两个功能，以一个按钮切换它们？

Answer 1

我放了一些文字，以便您可以看到更改

$(".OFF-LINK,.ON-LINK").on('click', function() {
  var box = document.getElementsByClassName("box");
  var x;
  for (x = 0; x < box.length; x++) {
    box[x].innerHTML = $(this).is('.OFF-LINK') ? box[x].innerHTML.replace(/href/ig, 'hren') : box[x].innerHTML.replace(/hren/ig, 'href');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button class="OFF-LINK">OFF</button>
<button class="ON-LINK">ON</button>

<div class="box">...
  <a>href</a>...
  <a>X</a>...
</div>
<div class="box">...
  <a>href</a>...
  <a>Y</a>...
</div>

如何结合这两个功能，以一个按钮切换它们？

Answer 2

如果我对您的理解正确，您想在按钮on-link和off-link之间切换类，然后再调用适当的函数吗？如果是这样：

<button class="button off-link">Off</button>

$('body').on('click', '.button', function(){
  $(this).toggleClass('off-link on-link');
  if ($(this).hasClass('off-link')) {
    $(this).innerHTML('Off');
    // Do your 'off-link' code here
  } else {
    $(this).innerHTML('On');
    // Do your 'on-link' code here
  }
});

Answer 3

您可以通过检查RegEx内部.replace()模式返回的匹配项并按照以下代码片段进行交换来实现此目的

function toggleLinks() {
    var box = document.getElementsByClassName("box"); 
    var x;
    for (x = 0; x < box.length; x++) {
      box[x].innerHTML = box[x].innerHTML.replace(/hre(f|n)/gi,
          g1 => {return (g1=="href") ? "hren" : "href"});  
    }
}

<button onclick="toggleLinks()">Toggle Links</button>

<div class="box">
  <a href="http://www.google.com">google</a>
  <br>
  <a href="http://www.yahoo.com" >yahoo</a>
</div>
<div class="box">
  <a href="http://www.stackoverflow.com"> stackoverflow</a>
  <br>
  <a href="http://www.github.com" >github</a>
</div>

Answer 4

通常，替换所有innerHTML只是更改一些细节是不好的做法。如果需要切换链接，最好找到所需的链接并仅使用其属性：

$('.box a').each(function(){
  var link = $(this).attr("href");
  $(this).attr("data-link", link);
  // saving each link in data-attribute
});

$('#toggle').on('click', function toggler(){
  let on = toggler.on = !toggler.on; // (*1)
  
  $('.box a').each(function(){
    var link = $(this).attr("data-link");
    
    $(this)[ on ? "removeAttr" : "attr" ]( "href", link ); // (*2)
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="toggle">Toggle Links</button>

<div class="box">
  <a href="https://google.com" target="_blank">link</a>
  <a href="https://google.com" target="_blank">link</a>
</div>
<div class="box">
  <a href="https://google.com" target="_blank">link</a>
  <a href="https://google.com" target="_blank">link</a>
</div>

（* 1） let on = toggler.on = !toggler.on;-每个函数都是一个对象。您可以像处理普通对象一样使用它的名称-为他设置新的属性或方法。我可以在函数之外声明变量let on = true;，但决定将所有内容都放入其中。 ! —是布尔值“ NOT”：转换false→true，反之亦然。因此，当您单击按钮时，toggler.on未定义（false），!将变为true并分配给自己（toggler.on = !toggler.on;）→将相同的值分配给变量on。

在下次单击时，属性toggler.on将保持true的值，并变为!true → false，依此类推。

（* 2） $(this)[ on ? "removeAttr" : "attr" ]( "href", link );

•三元运算符，一般形式：(boolean expression) ? (return this value if true) : (else)

在此示例中，如果返回on === true，则表达式将返回“ removeAttr”字符串，否则返回“ attr”。

•括号符号。通常，我们使用点符号，因为它更短。例如，elem.innerHTML可以写为elem["innerHTML"]。在这里，我使用了三元表达式来选择所需的方法。转换为if-else：

if( on ){
  $(this).removeAttr("href")
} else {
  var link = $(this).attr("data-link");
  $(this).attr("href", link );
}

和没有jQ的相同代码：

let links = document.querySelectorAll('.box a');
for( let i = 0; i < links.length; i++ ){
  links[i].dataset.link = links[i].getAttribute("href");
}

let toggle = document.getElementById('toggle');
toggle.addEventListener('click', function toggler(){
  let on = toggler.on = !toggler.on;
  
  for( let i = 0; i < links.length; i++ ){
    let link = links[i].dataset.link;
    links[i][ on ? "removeAttribute" : "setAttribute"]("href", link);
  }
});

<button id="toggle">Toggle Links</button>

<div class="box">
  <a href="https://google.com" target="_blank">link</a>
  <a href="https://google.com" target="_blank">link</a>
</div>
<div class="box">
  <a href="https://google.com" target="_blank">link</a>
  <a href="https://google.com" target="_blank">link</a>
</div>

使用一个按钮打开/关闭页面上的链接：toggle（）两个功能

4 个答案: