javascript - 调用 value + style.display 函数？

Question

我正在努力使其正常工作，因为我不知道正确的格式。

我正在尝试的是根据用户在 Javascript 小程序中选择的值来显示 CSS 模式。

这个想法是 return .style.display = "block";

function onClick(event){
    <something>.style.display = "block"; 
}

其中包含已以 intersects[0].object.title 格式保存的值

例如，如果我选择了“曼哈顿”

alert(intersects[0].object.title)

我将正确显示字符串“manhattan”。效果非常好。

但我无法得到 manhattan.style.display = "block";返回并在函数内工作？我尝试过:

function onClick(event){
    intersects[0].object.title.style.display = "block"; 
}

也尝试过

function onClick(event){
    (intersects[0].object.title).style.display = "block"; 
}

任何帮助将不胜感激

Answer 1

这可能不是您正在寻找的直接内容，但无论如何它可能会有所帮助。要使其在您的情况下工作，只需将按钮按下更改为对所选值的检查即可。

此路由不是直接调整 CSS，而是修改元素的 classList 以删除或添加包含正确 CSS 的 .hidden 类。

// Loop through all modal buttons
document.querySelectorAll('.modal-button').forEach(function(element) {
  // Add a click event listener to all modal buttons 
  element.addEventListener('click', function() {
    // Toggle the target modal on click
    toggleModal(element.dataset.target);
  });
});

// Create the function to toggle the modals
function toggleModal(target) {
  // Find the target
  let targetElement = document.querySelector(target);
  
  // Check if the target is hidden
  if (targetElement.classList.contains('hidden')) {
    // If it is, show it
    targetElement.classList.remove('hidden');
  } else {
    // If it isn't, hide it
    targetElement.classList.add('hidden');
  }
}

.hidden {
  display: none;
}

<button data-target="#modal" class="modal-button">Toggle Modal</button>
<div id="modal" class="hidden">Hey there, I'm a modal!</div>