Question

一旦你点击另一个div，我试图让div扩展。在我的情况下，我尝试在单击图像时使其中的某些文本扩展为div。指向我的JSFiddle的链接 - https://jsfiddle.net/txoyuvqn/3/

我正在使用的javascript看起来像。

    var divs = document.getElementsByClassName('image');
var whattochange = document.getElementsByClassName('text');
for (var i = 0; i < divs.length; i++)
  divs[i].addEventListener("click", function () {
    for (var i = 0; i < whattochange.length; i++) {
      whattochange[i].style.width = '500px'
      whattochange[i].style.transition = 'all 1s'
      whattochange[i].style.backgroundColor = 'red'
    }
  }, false);

然而，当我点击名为image的类时，它会影响所有的Text类，我知道它是因为将css更改为所有的文本div，但有没有办法让它只影响相关性DIV？或者我打算以错误的方式创建它？

Answer 1

getElementsByClassName返回一个数组，而不是单个元素。

divs是一个数组，您在变量名for之后正确使用[i]循环和索引指示符divs。

for需要一个类似的whattochange循环。

var divs = document.getElementsByClassName('image');
var whattochange = document.getElementsByClassName('text');
for (var i = 0; i < divs.length; i++)
  divs[i].addEventListener("click", function () {
    for (var i = 0; i < whattochange.length; i++) {
      whattochange[i].style.width = '800px';
      whattochange[i].style.transition = 'all 1s';
      whattochange[i].style.backgroundColor = 'red';
    }
  }, false);

Answer 2

可能有更好的方法，但你可以这样做：

var divs = document.getElementsByClassName('image');
var whattochange = document.getElementsByClassName('text');

for (var i = 0; i < divs.length; i++)
{
    divs[i].addEventListener("click", function() 
    { 
        var w = document.getElementById(this.id.replace('img', 'text'));
        w.style.width = '800px'
        w.style.transition = 'all 1s'
        w.style.backgroundColor = 'red'      
    });

    whattochange[i].id = 'text' + i;
    divs[i].id = 'img' + i;
}

Answer 3

请参阅fiddle

<强>的Javascript

var divs = document.getElementsByClassName('image');
  var whattochange = document.getElementsByClassName('text');
  for (var i = 0; i < divs.length; i++) {
      divs[i].addEventListener("click", function () {
          for (var i = 0; i < whattochange.length; i++) {
              whattochange[i].style.width = '800px';
              whattochange[i].style.transition = 'all 1s';
              whattochange[i].style.backgroundColor = 'red';
          }
      }, false);
  }

如果您的JavaScript代码依赖于它们，您必须确保元素存在。你的小提琴不起作用的原因是因为，你没有在完成加载后加载脚本。

在您的代码中，实现此目的的一种方法是将<script>标记放在正文的末尾，如下所示：

<html>
<head></head>
<body>
<script type="text/javascript">
    // code here
</script>
</body>

您还可以将所有代码放在window.onload事件的函数中，或使用jQuery。

一旦点击另一个div，我试图使div宽度扩展

3 个答案:

请参阅fiddle