Question

这个问题是在几天前回答给我的问题之后发生的here。我跟进了今天的问题，但遗憾的是还没有得到解答，我不确定如何解决这个问题。

＆＃13;

        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;         
        });

＆＃13;

.colours {
    background-color: #f5f5f5;
}

ul {
	list-style: none;
}

li {
    display: inline;
}

li img {
	height: 50px;
    border-radius: 25px;
}

＆＃13;

<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>

＆＃13;

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

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

我的问题如下，如何增加图像的可点击区域或以某种方式停止图像＆＃34;覆盖＆＃34;可点击区域？

此fiddle显示了我尝试实施的代码。

谢谢，Jaggy。

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');
});

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

2 个答案: