javascript - 最初のproduct_widgetをクリックすると、最初のproduct_widgetでprodust_nameを非表示にする方法?

Question

最初のproduct_widgetをクリックした場合、最初のproduct_widgetでprodust_nameをクリックするにはどうすればよいですか???

 <div class="product_widget">
    <div class="product_name"><a></a></div>
    <div class="product_image></div>
    <div class="product_price"></div>
  </div>
  <div class="product_widget">
    <div class="product_name"><a></a></div>
    <div class="product_image"></div>
    <div class="product_price"></div>
  </div>

Answer 1

jQuery を使用すると、次のことができます。

$(".product_widget:first).click( function() {
    $(this).find(".product_name").hide();
});

Answer 2

このようなことを試してください：

<div class="product_widget" onclick="doSomething(this)">

JavaScript:

function doSomething(elem) {
    var children = elem.getElementsByTagName("div");
    children[0].style.background = "blue";  
}

この関数は基本的に子div要素を取得し、最初の子要素の背景色を更新します[0]。もちろん、必要に応じて ( style.display = "none") を非表示にしたり、そのクラスを変更したりできます。

実施例

Answer 3

Jqueryを使ってみる

$('div.product_widget').click(function(){
 $('div.product_name').hide();
});