在无序列表中增加可点击的图像区域

Question

这个问题来自几天前我回答的问题here。我跟进了今天的问题，但不幸的是我还没有回答，我不知道该怎么做。

 document.addEventListener("click", function(e) { 
 
      var target = e.target; 
 

 
      // If not one of the `li` items, ignore it 
 
      if (!target.tagName.toLowerCase() === "li") { 
 
       return; 
 
      } 
 

 
      // If it doesn't have a data-src, ignore it 
 
      var newSrc = target.getAttribute("data-src"); 
 
      if (!newSrc) { 
 
       return; 
 
      } 
 

 
      // IN this case, we know exactly how the DOM is layed out 
 
      // and that the parent we want is two levels up. 
 
      // Looping through this is sometimes a better idea. 
 
      var parentDiv = target.parentNode.parentNode.parentNode; 
 

 
      var img = parentDiv.getElementsByTagName("img")[0]; 
 
      console.log(img); 
 

 
      img.src = newSrc;   
 
     }); 
 

 

.colours { 
 
    background-color: #f5f5f5; 
 
} 
 

 
ul { 
 
\t list-style: none; 
 
} 
 

 
li { 
 
    display: inline; 
 
} 
 

 
li img { 
 
\t height: 50px; 
 
    border-radius: 25px; 
 
}

<div class="main-img"> 
 
     <img src="http://i.imgur.com/DxkuRlE.jpg" height="50%" width="50%"> 
 
     </div> 
 
     <div class="colours"> 
 
     <ul> 
 
      <li data-src="http://i.imgur.com/DxkuRlE.jpg"><img src="http://i.imgur.com/doLMeIi.jpg"></li> 
 
      <li data-src="http://i.imgur.com/fnWJNDi.jpg"><img src="http://i.imgur.com/GcGpWy5.jpg"></li> 
 
      <li data-src="http://i.imgur.com/xt6cysI.jpg"><img src="http://i.imgur.com/AWCzo9N.jpg"></li> 
 
      <li data-src="http://i.imgur.com/GEcT7Hn.jpg"><img src="http://i.imgur.com/yTeF0qu.jpg"></li> 
 
      <li data-src="http://i.imgur.com/iWRara7.jpg"><img src="http://i.imgur.com/i35OBvT.jpg"></li> 
 
     </ul> 
 
     <ul> 
 
      <li data-src="http://i.imgur.com/OgbJcRe.jpg">"Red"</li> 
 
      <li data-src="http://i.imgur.com/duO7fk0.jpg">"Grey/White"</li> 
 
      <li data-src="http://i.imgur.com/j74Up5A.jpg">"Green"</li> 
 
      <li data-src="http://i.imgur.com/kjFduEb.jpg">"Black"</li> 
 
      <li data-src="http://i.imgur.com/jHaxFe7.jpg">"Off White"</li> 
 
     </ul>

通过单击颜色它应该改变主图像。在第一行中，我使用图像作为列表项。它似乎“覆盖”可点击区域。我必须点击图像外部（左下角或右下角）才能更改主图像。

鉴于在第二行只使用文本而不是图像，所有这些都是可点击的，并继续更改主图像。

我的问题如下，如何增加图片的可点击面积或以某种方式停止图片“覆盖”可点击区域？

这fiddle显示我试图实现的代码。

谢谢，杰吉。

Answer 1

请尝试以下更改。问题是你的js正在检查li目标，但是目标图像正在返回img元素。更新小提琴 - https://jsfiddle.net/p8dcaqmn/7/

完整的HTML（主IMG加入ID）

<div class="main-img"> 
     <img src="http://i.imgur.com/DxkuRlE.jpg" height="50%" width="50%" id="mainImg"> 
     </div> 
     <div class="colours"> 
     <ul> 
      <li data-src="http://i.imgur.com/DxkuRlE.jpg"><img src="http://i.imgur.com/doLMeIi.jpg"</li> 
      <li data-src="http://i.imgur.com/fnWJNDi.jpg"><img src="http://i.imgur.com/GcGpWy5.jpg"></li> 
      <li data-src="http://i.imgur.com/xt6cysI.jpg"><img src="http://i.imgur.com/AWCzo9N.jpg"></li> 
      <li data-src="http://i.imgur.com/GEcT7Hn.jpg"><img src="http://i.imgur.com/yTeF0qu.jpg"></li> 
      <li data-src="http://i.imgur.com/iWRara7.jpg"><img src="http://i.imgur.com/i35OBvT.jpg"></li> 
     </ul> 
     <ul> 
      <li data-src="http://i.imgur.com/OgbJcRe.jpg">"Red"</li> 
      <li data-src="http://i.imgur.com/duO7fk0.jpg">"Grey/White"</li> 
      <li data-src="http://i.imgur.com/j74Up5A.jpg">"Green"</li> 
      <li data-src="http://i.imgur.com/kjFduEb.jpg">"Black"</li> 
      <li data-src="http://i.imgur.com/jHaxFe7.jpg">"Off White"</li> 
     </ul> 

JS

document.addEventListener("click", function(e) { 
    var target = e.target; 


    // If not one of the `li` items, ignore it 
    if (!target.tagName.toLowerCase() === "li" || !target.tagName.toLowerCase() === "img") { 
     return; 
    } 

    // If it doesn't have a data-src, ignore it 
    var newSrc = target.getAttribute("data-src"); 
    if (!newSrc) { 
     newSrc = target.parentNode.getAttribute("data-src"); 
     if (!newSrc) 
      return; 
    } 

    // IN this case, we know exactly how the DOM is layed out 
    // and that the parent we want is two levels up. 
    // Looping through this is sometimes a better idea. 
    var parentDiv = target.parentNode.parentNode.parentNode; 

    var img = document.getElementById("mainImg"); 
    console.log(img); 

    img.src = newSrc;   
}); 

CSS（仅李改）

li { 
    display: inline-block; 
    cursor:pointer; 
} 

Answer 2

我希望它可以帮助您。

link

HTML

<div class="main-img"> 
    <img src="http://i.imgur.com/DxkuRlE.jpg"> 
</div> 
<div class="colours"> 
    <ul class="thumbnails"> 
     <li data-src="http://i.imgur.com/DxkuRlE.jpg" class="active"> 
      <img src="http://i.imgur.com/doLMeIi.jpg" /> 
     </li> 
     <li data-src="http://i.imgur.com/fnWJNDi.jpg"> 
      <img src="http://i.imgur.com/GcGpWy5.jpg"> 
     </li> 
     <li data-src="http://i.imgur.com/xt6cysI.jpg"> 
      <img src="http://i.imgur.com/AWCzo9N.jpg"> 
     </li> 
     <li data-src="http://i.imgur.com/GEcT7Hn.jpg"> 
      <img src="http://i.imgur.com/yTeF0qu.jpg"> 
     </li> 
     <li data-src="http://i.imgur.com/iWRara7.jpg"> 
      <img src="http://i.imgur.com/i35OBvT.jpg"> 
     </li> 
    </ul> 
    <ul> 
     <li data-src="http://i.imgur.com/OgbJcRe.jpg">"Red"</li> 
     <li data-src="http://i.imgur.com/duO7fk0.jpg">"Grey/White"</li> 
     <li data-src="http://i.imgur.com/j74Up5A.jpg">"Green"</li> 
     <li data-src="http://i.imgur.com/kjFduEb.jpg">"Black"</li> 
     <li data-src="http://i.imgur.com/jHaxFe7.jpg">"Off White"</li> 
    </ul> 

的CSS

.main-img { 
    background: url(http://s21.postimg.org/404u5wqrr/loader.gif) no-repeat; 
    background-size: cover; 
    background-position: center center; 
    width: 300px; 
    min-height: 300px; 
} 
.main-img img { 
    max-width: 100%; 
} 
.colours { 
    background-color: #f5f5f5; 
} 
ul { 
    list-style: none; 
} 
li { 
    display: inline-block; 
    vertical-align: top; 
} 

li.active { 
    background-color: rgba(0,0,0,0.5); 
} 

li img { 
    height: 50px; 
    border-radius: 25px; 
} 

jQuery的

$(document).ready(function() 
        { 
    $('.thumbnails').on({ 
     click: function() { 
      $('.main-img img').attr('src', $(this).attr('data-src')); 
      $(this).addClass('active').siblings().removeClass('active'); 
     } 
    }, 'li'); 
});