使用$（this）將子img放入div中； [點擊事件]

Question

我正在嘗試獲得單擊的div的子圖像。 我想得到它的src值。 但是它返回的是不確定的。 有人可以指出我正確的方向嗎？

嘗試使用Jquery .find（） https://api.jquery.com/find/嘗試使用Jquery .children（） https://api.jquery.com/children/

兩者都返回未定義。

for (let i = 0; i < $('#draw-raster > div').length; i++) {
    $(document).on('click', '#raster-item'+i, () => {
        let image = $(this).children('img').attr('src'); //undefined
        let image2 = $(this).find('img').attr('src'); //undefined


        if (image) {
            console.log(image);
            return alert("image child found!");
        }

        return setTimeout(() => {
            $('#raster-item'+i).children('img').hide();
        }, 4500);
    });
    $('#image'+i).hide();
}

加載html：

   for(let i = 0; i < 16;  i++)
    {
        let image = displayImages();

        $('#draw-raster').prepend(
            "<div id=raster-item" + i + " class='imageh"+i+"' data-id=" + i + "><img src='"+ displayImages() +"' class='image "+i+"' id='image"+ i +"' alt='Failed to load image' width='173.19' height='107.3'></div>"
        );
    }

html頁面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Memory</title>
    <script src="inc/js/jquery.min.js"></script>
    <link rel="stylesheet" href="inc/css/boostrap.min.css">
    <link rel="stylesheet" href="inc/css/memory.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>

<div class="container justify-content-center">
    <div class="wrapper">
      <div class="row">
          <div class="col-lg-9">
              <div class="card">
                  <div class="card-header bg-dark" style="color:white;">
                      <h2>Memory</h2>
                  </div>
                  <div class="card-body">
                      <section class="col-12 mx-auto" id="draw-raster">

                      </section>
                  </div>
              </div>
          </div>
          <div class="col-lg-3">
              <div class="card">
                  <div class="card-header bg-dark" style="color:white;">
                      <h2>Turns</h2>
                  </div>
                  <div class="card-body">
                      <div id="turns">Turns: 0</div>
                      <div id="sets">Sets: 0</div>
                  </div>
              </div>
              <div class="form-group">
                <button class="btn btn-success col-12" type="button" id="reset">Reset scores</button>
            </div>
          </div>
      </div>
    </div>
</div>

<script src="inc/js/memory.js"></script>

</body>
</html>

兩種嘗試均返回未定義的值，我不確定哪種方法有效。 是的，我也一直在向Google發送垃圾郵件。 ：'^）

Answer 1

關於代碼的一些注意事項：

1）如果要使用this功能，則需要從箭頭功能切換回常規的匿名功能。 Arrow函數本身沒有this ，它將從其外部詞法環境中借用上下文。 這就是為什么您的代碼保持返回未定義的原因。

2）您不需要循環。 使用jQuery的好處是您可以一次處理所有元素的集合。 在您的情況下，您要將單個事件偵聽器附加到父元素（此處為document ），並等待事件從.raster-item img並被“捕獲”。 這稱為事件委托，當您要在DOM加載后要處理添加到DOM的新元素時，此方法很有用。

2）您會發現使用類而不是許多ID會更容易。

這是一個基於您的代碼的示例，其中包含以下更改：

 // Use event delegation to add an event listener to the element with // the container class that watches out for click events on **all** // elements with the raster-item class that contain images $('.container').on('click', '.raster-item img', function () { // `$(this)` will be the image element, so simply grab its src // from the attribute console.log($(this).attr('src')); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container"> <div class="raster-item"><img src="https://dummyimage.com/50x50/555/fff.png" /></div> <div class="raster-item"><img src="https://dummyimage.com/50x50/777/fff.png" /></div> <div class="raster-item"><img src="https://dummyimage.com/50x50/999/fff.png"/></div> <div class="raster-item"><img src="https://dummyimage.com/50x50/bbb/fff.png" /></div> </div>

Answer 2

您不需要jQuery。 您可以利用原始JavaScript利用事件冒泡的功能 。

在下面的網頁中， script標簽內的代碼偵聽click事件，並在事件發生時通過DIV元素運行一些代碼（例如氣泡）：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Clicked div img</title>
</head>
<body>
  <div class="catcher">
    <p>This is a div with an image inside</p>
    <img src="image-to-pick.jpg" alt="image to pick" ()>
  </div>

  <script>
    document.addEventListener('click', function (event) {
      if (event.target.tagName == 'DIV') {
        var imgToPick = event.target.querySelector('img');
        console.log(imgToPick.src); // add your code here
      } 
    }, false);
  </script>
</body>
</html>

換句話說，每當您單擊該頁面時，都會觸發一個“單擊事件”，該事件冒泡直到到達HTML文檔的根（您可以將其想象為一個倒置的樹，其中根是html標記）。 如果您不需要或不想讓它冒泡到DIV上方的元素，則還可以在處理img src之后立即使用event.stopPropagation()停止該click事件的傳播。

您可以在MDN（Mozilla Dev。Network）上找到有關此工作原理的更多信息。

Answer 3

我不太確定您需要在什么情況下執行此操作，但是使用jquery會非常簡單。

如果父div中有多個圖像，則可以將子圖像設置為click事件的選擇器，並在直接單擊時返回每個圖像src。

這樣生成的jquery只有三行，您可以向父div添加任意數量的圖像：

<div class="image-container">
  <img id="first" src="first-source-goes-here.jpg" alt="img text" />
  <img id="second" src="second-source-goes-here.jpg" alt="img text" />
  <img id="third" src="third-source-goes-here.jpg" alt="img text" />
</div>


$(".image-container > img").click(function() {
  // replace 'alert' with what ever you need it to be
  alert( $(this).attr("src") )
})

編輯：

為了回應Andy對下面我的回答的評論，如果您在DOM加載后立即加載圖像，則可以在單擊父div上進行檢查，以查看其中是否包含任何圖像，然后再返回源：

$(".image-container").click(function() {
    if( $(this).children("img").length > 0 ) {
    alert( $(this).find("img").attr("src") )
  }  else {
    alert('there are no images here')
  }
})

使用$（this）將子img放入div中； [點擊事件]

問題描述

3 個解決方案

解決方案1
1 已采納 2019-08-02 10:41:01

解決方案2
0 2019-08-02 10:26:26

解決方案3
0 2019-08-02 10:34:57

使用$（this）將子img放入div中； [點擊事件]

問題描述

3 個解決方案

解決方案1 1 已采納 2019-08-02 10:41:01

解決方案2 0 2019-08-02 10:26:26

解決方案3 0 2019-08-02 10:34:57

解決方案1
1 已采納 2019-08-02 10:41:01

解決方案2
0 2019-08-02 10:26:26

解決方案3
0 2019-08-02 10:34:57