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

Question

我正在努力让它工作，因为我不知道正确的格式。

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

思路是返回.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>