Question

＆＃13;

function change(element) {
  document.getElementById('imageReplace').src = element;
}

function change_1() {
  document.getElementById('1').style.background = '#111';
  document.getElementById('1').style.color = '#FFF';
  document.getElementById('1').style.cursor = 'auto';
  document.getElementById('2').style.background = '#FFC300';
  document.getElementById('2').style.color = '#FFF';
  document.getElementById('2').style.cursor = 'pointer';
  document.getElementById('3').style.background = '#FFC300';
  document.getElementById('3').style.color = '#FFF';
  document.getElementById('3').style.cursor = 'pointer';
}

function change_2() {
  document.getElementById('2').style.background = '#111';
  document.getElementById('2').style.color = '#FFF';
  document.getElementById('2').style.cursor = 'auto';
  document.getElementById('1').style.background = '#FFC300';
  document.getElementById('1').style.color = '#FFF';
  document.getElementById('1').style.cursor = 'pointer';
  document.getElementById('3').style.background = '#FFC300';
  document.getElementById('3').style.color = '#FFF';
  document.getElementById('3').style.cursor = 'pointer';
}

function change_3() {
  document.getElementById('3').style.background = '#111';
  document.getElementById('3').style.color = '#FFF';
  document.getElementById('3').style.cursor = 'auto';
  document.getElementById('1').style.background = '#FFC300';
  document.getElementById('1').style.color = '#FFF';
  document.getElementById('1').style.cursor = 'pointer';
  document.getElementById('2').style.background = '#FFC300';
  document.getElementById('2').style.color = '#FFF';
  document.getElementById('2').style.cursor = 'pointer';
}

＆＃13;

.row_1 {
  float: left;
}

＆＃13;

<div class="row_1">
  <button id="1" onclick="change('somepic.jpg'); change_1()">1</button>
  <button id="2" onclick="change('somepic2.jpg'); change_2()">2</button>
  <button id="3" onclick="change('somepic3.jpg'); change_3()">3</button>
 </div>

＆＃13;

我在这里有点新鲜...... 刚刚开始我的网站并尝试了一些javascript编码。

有趣的是，在Firefox中打开时，它在Adobe Dreamweaver CS6中运行得非常好。

然而，当它被放置在我的网站管理员（我的网站如何上网）时，它的工作速度非常慢......

请帮忙。我怀疑代码必须太长，但我已经尝试了很多方法，但它并没有显示我想要的方式...

正如您可能已经猜到的那样，我尝试制作一个按钮，在点击时更改样式，其他按钮将恢复默认样式...

提前致谢！

Answer 1

不要反复使用document.getElementById()。这没有道理。每次执行此操作时，您都要在DOM中搜索节点。

所以不要这样：

function change_3() {
  document.getElementById('3').style.background = '#111',
  document.getElementById('3').style.color = '#FFF',
  document.getElementById('3').style.cursor = 'auto'
}

这样做

var three = document.getElementById('3');

function change_3() {
  three.style.background = '#111',
  three.style.color = '#FFF',
  three.style.cursor = 'auto'
}

Answer 2

正如其他人所说，你不应该反复使用document.getElementById()来获得相同的元素同样，逗号应该是分号，我认为只使用一个数字作为id也不对，但我可能会误认为那部分。

如果我正确地解释您的代码，您只需尝试将单击的按钮设置为活动状态，将其他按钮设置为非活动状态，同时替换图像。

这就是我要做的事情：

<强> HTML

<div class="row_1">
  <button id="button1" class="button" data-image="somepic.jpg">1</button>
  <button id="button2" class="button" data-image="somepic2.jpg">2</button>
  <button id="button3" class="button" data-image="somepic3.jpg">3</button>
</div>

<强> CSS

.row_1 {
  float: left;
}

.button {
  background: #ffc300;
  color: #fff;
  cursor: pointer;
}

.button.active {
  background: #111;
  color: #fff;
  cursor: auto;
}

<强> JS

$(function() {
  $('.button').on('click',function() {
    var $btn = $(this);
    var image = $btn.data('image');
    if (image) {
      change(image);
    }
    changeButton($btn);
  });
});

function change(element) {
  document.getElementById('imageReplace').src = element;
}

function changeButton($btn) {
  $('.button').not($btn).removeClass('active');
  if (!$btn.hasClass('active')) {
    $btn.addClass('active');
  }
}

修改
我使用jQuery是因为你标记了你的问题，即使你没有在你自己的代码中使用任何jQuery。

javascript需要很长时间才能执行，让观众等待太久

2 个答案: