关于javascript：切换onclick事件onclick


Switch onclick Event onclick

我有一个函数编写使用占位符打开/关闭div的超链接。

1
Open

然后onclick事件打开div。

我有这个onclick关闭它：

1
Close

我想要做的是有一个占位符，用于在两个onclick事件之间切换的超链接。 所以onclick=show会切换到onclick=hide，反之亦然。

我到处寻找，无法找到适合我情况的直接解决方案。

修订问题

这是我正在使用的具体内容。

1
2
3
4
5
6
7
8
9
10
function show(target) {
    document.getElementById(target).style.height = '300px';
}
function hide(target) {
    document.getElementById(target).style.height = '0px';
}

Open

    Close

单击Open，它将打开/展开内联高度样式。 单击Close然后关闭。

我需要onclick切换，但Open更改为Close并反转。

保持链接的位置是理想的。 因此，链接外部的Open链接将被隐藏，直到单击div中的Close链接。

我感谢任何反馈。

相关讨论

如果您想在多个按钮上使用toggle，这是另一个答案。此解决方案使用按钮存储其目标的状态，因此它使用toggle.call()修改toggle中this的值。

它受到jQuery.toggle()和Yuriy Yakym的回答的启发。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
for (i = 1; i <= 3; i++) {
  var button = document.getElementById("button"+i),
      target = document.getElementById("target"+i);
  // wrapped in closure because https://stackoverflow.com/q/8909652/5743988
  (function(_button, _target) {
    _button.onclick = function() {
      toggle.call(_button, _target);
    }
  })(button, target);
}

function toggle(target) {
  this.func = this.func || hide; // if"func" is undefined, assign"hide"
  this.func.call(target); // execute"func"
  this.func = this.func === hide // make"func" call the other thing next time
    ? (this.innerHTML ="Show", show) : (this.innerHTML ="Hide", hide);
}

function hide() {
  this.oldDisplay = window.getComputedStyle(this).display;
  this.style.display ="none"; // better than"height = 0px"
}

function show() {
  this.oldDisplay = this.oldDisplay ||"block";
  this.style.display = this.oldDisplay;
}
1
2
3
button, div {
  display: inline-block;
}
1
2
3
4
5
6
7
8
<button id="button1">Close</button>
Hello World!

<button id="button2">Close</button>
Hello Again World!

<button id="button3">Close</button>
Hello Again Again World!

相关讨论

您可以动态更改按钮的onclick事件，但是您已经使用HTML来描述功能已经足够尴尬了。如果您保留JavaScript中的所有功能，它会更好。像这样的东西：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var button = document.getElementById("button");
var target = document.getElementById("target");

button.innerHTML ="Close";
button.onclick = function() { hide(target); };

function hide(target) {
  console.log("hiding");
  target.style.display ="none";
  console.log(target);
  button.innerHTML ="Open";
  button.onclick = function() { show(target); };
}

function show(target) {
  target.style.display ="block";
  button.innerHTML ="Close";
  button.onclick = function() { hide(target); };
}
1
2
<button id="button">Close</button>
Hello World!

相关讨论

可以在其上下文中保存按钮的状态。然后，根据其状态调用适当的函数。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function toggle() {
    this.state = !this.state; // false - open; true - closed; default = false (because is not initialized yet)
    this.innerHTML = this.state ? 'Close' : 'Open';
   
    if(this.state) {
        open();
    } else {
        close();
    }
}

function open() {
    alert("Opened");
}

function close() {
    alert("Closed");
}
1
2
3
Open
Open
Open

相关讨论

创建元素后

var elem = document.querySelector('.js-switch');
var init = new Switchery(elem);

像这样将OnClickMetod绑定到init.switcher

$(init.switcher).on('click', OnClickMetod);

我想出了一个直截了当的解决方案。

单击打开的链接并打开div时，我需要打开链接消失，并将关闭链接显示为单独的元素。相同的事件应反向工作，即关闭链接关闭div并显示打开的链接。

虽然我正在使用的原始代码使用内联高度属性来控制打开和关闭，但下面的示例使用display属性。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
function show(target) {
    document.getElementById(target).style.display = 'block';
}
function hide(target) {
    document.getElementById(target).style.display = 'none';
}
function hideButton() {
    var x = document.getElementById("open");
    x.style.display ="none";
    var x = document.getElementById("close");
    x.style.display ="";
}
function showButton() {
    var x = document.getElementById("open");
    x.style.display ="";
    var x = document.getElementById("close");
    x.style.display ="none";
}

Open



Close

它在野外 - http://iemajen.com/scripts/mssa/

有了这个，我还有两个问题。

  • 我将如何编写它，以便它使用不显眼的Javascript将行为附加到JS内部的DOM元素，这意味着单独的HTML与JS
  • 我如何写这个用于多个div？我有十几个div，最初将关闭，每个div都使用我写的标记单独打开。我可以为每个div / unique ID等编写它，但这似乎是更糟糕的练习，我想学习最佳实践。

    • 我应该为最后一个问题打开一个新主题吗？

    相关讨论

    jQuery切换或toggleClass方法应该适合你。

    根据要求编辑一个示例：

    假设您有一个基于OP的CSS类：

    1
    2
    3
    .info-box {
        height: 300px;
    }

    通过使用$('#myTarget').toggleClass('info-box')，您将删除该类或添加它。如果你没有它，你将添加它。如果你有它，你将删除它。就像那样。

    所以，我刚刚把它放在一起的一个工作示例就是这里，它实现了toggle()而不需要添加任何类，我相信它仍然可以完成OP寻求解决的问题。

    https://jsfiddle.net/bbh9m478/1/

    希望有所帮助！

    相关讨论