Question

我的问题是，使选中的项目出现“继续”按钮，而使用JavaScript取消选中的项目则消失。

var typpro = document.getElementsByClassName("typpro"),
    continubutton = document.getElementsByClassName("continue");
var w;
for (w = 0; w < typpro.length; w++) {
    typpro[w].onclick = function () {
        'use strict';
        this.classList.toggle("active");
        if (this.classList.contains("active")) {
            continubutton[0].style.height = "100px";
        } else {
            continubutton[0].style.height = "0px";
        }
    };
}

<div class=" col-md-3 col-sm-4 col-xs-6">
    <div class="typpro">
        <button>Volume Button</button>
    </div>
</div>
<div class=" col-xs-12">
    <div class="typpro">
        <button style="width:98%">Other</button>
    </div>
</div>
<div class=" col-xs-12">
    <div class="inputpro">
        <input type="text" placeholder="your Problem">
    </div>
</div>
<div class=" col-xs-12">
    <div class="continue">
        <button>Continue</button>
    </div>
</div>
</div>
</div>

Answer 1

因此，您的代码本身有许多不利之处。

首先，您需要实际定义continubutton变量，如下所示：

HTML

<button id="continubutton" style="display: none;">Continue</button>

JS：

var continubutton = document.getElementById('continubutton');

然后，您还需要定义typpro变量，如下所示：

JS：

var typpro = document.getElementsByClassName('typpro');

对于您要执行的操作，我选择了display: inline和display: none，而不是更改高度，因为要完成此操作，您还需要执行大量其他CSS工作。但这是最终结果：

HTML：

<div class=" col-md-3 col-sm-4 col-xs-6">
        <div class="typpro">
            <button>Screnen</button>
        </div> 
    </div> 
    <div class=" col-md-3 col-sm-4 col-xs-6"> 
        <div class="typpro"> 
            <button>Battery</button>
        </div> 
    </div> 
    <button id="continubutton" style="display: none;">Continue</button>
    </div>

还有JS：

var w;
    var typpro = document.getElementsByClassName('typpro');
    var continubutton = document.getElementById('continubutton');
    for (w = 0; w < typpro.length; w++){
        typpro[w].onclick = function () {
            'use strict';
            this.classList.toggle("active");
            if(this.classList.contains("active")){
                continubutton[0].style.display = "inline"; 
            } else {
                continubutton[0].style.display = "none"; 
            } 
        }; 
    }

编辑：由于使用height似乎是我们需要走的路，所以这里是更新的代码：

  var w;
		var typpro = document.getElementsByClassName('typpro');
		var continubutton = document.getElementsByClassName('continue');
		for (w = 0; w < typpro.length; w++){
			typpro[w].onclick = function () {
				'use strict';
				this.classList.toggle("active");
				if(this.classList.contains("active")){
					continubutton[0].style.height = "100px"; 
				} else {
					continubutton[0].style.height = "0px"; 
				} 
			}; 
		}

<div class=" col-md-3 col-sm-4 col-xs-6">
			<div class="typpro">
				<button>Screnen</button>
			</div> 
		</div> 
		<div class=" col-md-3 col-sm-4 col-xs-6"> 
			<div class="typpro"> 
				<button>Battery</button>
			</div> 
		</div> 
		<div class="continue" style="height: 0;overflow:hidden;">
			<button id="continubutton">Continue</button>
		</div>
		</div>

重要的是，您要在<div class="continue"></div>容器上设置初始高度，并将其设置为overflow: hidden;，这样才能使隐藏在边界框之外的所有内容都不会被看到。这将使您可以设置高度的动画，以便在选择一个选项之前，该按钮显示为“隐藏”。

Answer 2

解决方案是

    for (let btn of typpro) {
  btn.addEventListener('click', function() {
    let token = 0;
    this.classList.toggle('active');
    for (let i = 0; i < typpro.length; i += 1) {
      if (typpro[i].classList.contains('active')) {
        token += 1;
      }
    }
    if (token > 0) {
      continubutton[0].style.height = '100px';
    } else {
      continubutton[0].style.height = '0';
    }

  });
}

当选择项目时使“继续”按钮出现，而当未选择项目时使“继续”按钮消失

2 个答案: