Question

也许有些人可以帮助我解决这个问题。我有此代码，并且对产品进行了扩展，单击产品时将显示产品说明。但是点击功能不起作用（无法关闭描述）。谢谢！

$('.product').on('click', function(){
    $('.product .productExtension').css("display","none");
    $(this).children(".productExtension").css("display","block");
});
function close(){
	$('.productExtension').css("display","none");
}

.product{
  position: relative;
  width: 80px; height: 160px;
  padding: 20px;
  border: solid 1px grey;
  text-align: center; font-family: Arial;
}
.product > .productExtension{
  position: fixed;
  top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 300px; height: 200px;
  padding: 20px;
  background: red;
  text-align: left;
  display: none;
}
.product > .productExtension > .closeProductExtension{
  position: absolute;
  top: -40px; left: 0;
  width: 20px; height: 20px;
  margin: 10px;
  border: none;
  background: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="product">
  <div class="productName">Red Hoodie</div>
  <div class="productPrice">14.72$</div>
  <div class="productExtension">
    <div class="productDescription">This hoodie is in red color</div>
    <div class="closeProductExtension" onclick="close()">Close</div>
  </div>
</div>

Answer 1

现在，我知道这并不是问题的全部，我在样式方面也有所保留，但是绝对不需要在每次关闭时都隐藏所有不同的Collectors.collectasString类。读取productExtension div中详细的属性，并将其呈现为模态，将轻松得多。

关闭模态确实有一种过于复杂的方式（那里只有一些自由，对此我很抱歉：））

当前都接受的答案都详细说明了您无法使用product（可能是window.close）的原因，我只是认为当您拥有多个产品时，如何提供一种不同的使用方式现在描述的模态和DOM之间的数据。我认为它有其优势

close

window.addEventListener( 'load', function() {
  document.querySelectorAll('.product').forEach( product => {
    product.addEventListener('click', handleProductClicked, false );
  } );
  
  document.querySelectorAll('[data-action]').forEach( action => {
    action.addEventListener('click', handleAction );
  } );
  
  function handleAction( e ) {
    const owner = e.currentTarget;
    const action = owner.getAttribute('data-action');
    const selector = owner.getAttribute('data-target');
    const target = document.querySelector( selector );
    if (action === 'hide') {
      if ( !target.classList.contains('hidden') ) {
        target.classList.add('hidden');
      }
    }
  }
  
  function showModal( title, content, owner ) {
    const modal = document.querySelector('#modal');
    if ( modal.classList.contains('hidden') ) {
      modal.classList.remove( 'hidden' );
    }
    modal.querySelector('[data-for=title]').innerText = title;
    modal.querySelector('[data-for=content]').innerHTML = content;
  }
  
  function handleProductClicked( e ) {
    const productContainer = e.currentTarget;
    const name = productContainer.querySelector('.productName').innerText;
    const description = productContainer.querySelector('.productExtension').innerHTML;
    showModal( name, description, productContainer );
  }
} );

.hidden {
  display: none;
  visibility: hidden;
}
.productExtension {
  display: none;
  visibility: hidden;
}
.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 200px;
  border: solid #a0a0a0 1px;
  box-shadow: 5px 3px 5px #777;
  background-color: #cfcfcf;
}
.modal > .title {
  position: absolute;
  left: 0px;
  top: 0px;
  right: 0px;
  height: 20px;
  font-size: 0.9em;
  background-color: blue;
  border-bottom: solid #fff 1px;
}
.modal > .title > .controls {
  position: absolute;
  right: 0px;
  top: 0px;
  width: 20px;
  height: 18px;
  background-color: #efefef;
  border: solid #a0a0a0 1px;
  text-align: center;
  text-transform: small-caps;
}
.controls:hover {
  font-weight: bold;
  cursor: pointer;
}
.modal > .title > [data-for] {
  padding: 3px;
  color: #fff;
  font-weight: 800;
}
.modal > .content {
  position: absolute;
  left: 0px;
  right: 0px;
  top: 21px;
  bottom: 0px;
  padding: 5px;
  border: inset #666 1px;
}
.product {
  position: relative;
  width: 80px;
  height: 160px;
  padding: 20px;
  border: solid 1px grey;
  text-align: center;
  font-family: Arial;
}

Answer 2

之所以发生，是因为两个函数都触发了。第一个触发器是因为您单击的是DIV“产品”内部的项目，第二个触发器是因为已将函数传递给onClick。您应该从“产品”中删除“ productExtension” div，以使其正常工作。

Answer 3

如其他注释中所述，您在父级和子级中都有两个单击处理程序。父div正在拦截所有点击事件。根据您的要求尝试一下。

$(".product").on("click", function(e) {
  $(".product .productExtension").css("display", "none");
  $(this)
    .children(".productExtension")
    .css("display", "block");
  if (e.target.classList.contains('closeProductExtension')) {
    $(".productExtension").css("display", "none");
    }
});

Answer 4

您有几个问题。第一个是您也触发open事件。为了解决这个问题，您可以使用停止传播。第二个是您正在使用JS中已经使用的方法名称“ close”。

$('.product').on('click', function() {
  $('.product .productExtension').css("display", "none");
  $(this).children(".productExtension").css("display", "block");
});

function closeE(event) {
  event.stopPropagation();
  $('.productExtension').css("display", "none");
}

.product {
  position: relative;
  width: 80px;
  height: 160px;
  padding: 20px;
  border: solid 1px grey;
  text-align: center;
  font-family: Arial;
}

.product>.productExtension {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 200px;
  padding: 20px;
  background: red;
  text-align: left;
  display: none;
}

.product>.productExtension>.closeProductExtension {
  position: absolute;
  top: -40px;
  left: 0;
  width: 20px;
  height: 20px;
  margin: 10px;
  border: 1px solid black;
  background: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="product">
  <div class="productName">Red Hoodie</div>
  <div class="productPrice">14.72$</div>
  <div class="productExtension">
    <div class="productDescription">This hoodie is in red color</div>
    <div class="closeProductExtension" onclick="closeE(event)">Close</div>
  </div>
</div>

JS-点击事件无法正常运行

4 个答案: