Question

我的页面上有8张图片，一列中有4张，另一列中有4张。

当我点击第一列（panel1）中的任何图像时，我可以看到图像顶部出现一个圆圈，表示它已被选中。

当我点击另一列（面板2）中的任何图像时，图像会略微淡出，但不会显示圆圈。

<div class="row col-xs-12 margin0">
    <div class="col-xs-12 col-sm-6 col-md-3 productmargintop5 paddingRound productsLeft">
        <div class="boxTop"></div>
        <div class="box" id="panel1">
                <div class="row col-xs-12 margin0" style="margin-left:-8%">
                        <div class="col-md-6 col-xs-6">
                            <img src="http://res.cloudinary.com/dncu6pqpm/image/upload/v1424145153/black_cherries_snbvu8.png" data-id="1" alt="" data-name="blackcherry" />
                        </div>
                        <div class="col-md-6 col-xs-6">
                            <img src="http://res.cloudinary.com/dncu6pqpm/image/upload/v1424145152/coconut_psdlax.png" data-id="2" alt="" data-name="coconut" />
                        </div>
                </div>
                <div class="clearfix"></div>
                <div class="marginBottom10 visible-xs-block"></div>
                <div class="row col-xs-12 margin0" style="margin-left:-8%">
                        <div class="col-md-6 col-xs-6">
                            <img src="//res.cloudinary.com/dncu6pqpm/image/upload/v1424145152/mango_p3tjp5.png" data-id="3" alt="" data-name="mango" />
                        </div>
                        <div class="col-md-6 col-xs-6">
                            <img src="http://res.cloudinary.com/dncu6pqpm/image/upload/v1424145152/strawberries_s1da7u.png" data-id="4" alt="" data-name="strawberries" />
                        </div>
                </div>
                <div class="clearfix"></div>
                <div class="marginBottom10 visible-xs-block"></div>
        </div>
        <div class="boxBtm"></div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-1 productmargintop5 paddingRound productsLeft" style="top:40%; left: 4%; position:relative"> + </div>
    <div class="col-xs-12 col-sm-6 col-md-3 productmargintop5 paddingRound productsLeft">
        <div class="boxTop"></div>
        <div class="box" id="panel2">
                <div class="row col-xs-12 margin0" style="margin-left:-6%">
                        <div class="col-md-6 col-xs-6">
                            <img src="http://res.cloudinary.com/dncu6pqpm/image/upload/v1424145156/chocolate_lxphco.png" data-id="1" alt="" data-name="chocolate" />
                        </div>
                        <div class="col-md-6 col-xs-6">
                            <img src="http://res.cloudinary.com/dncu6pqpm/image/upload/v1424145156/cinnamon_o8nbos.png" data-id="2" alt="" data-name="cinnamon" />
                        </div>
                </div>
                <div class="clearfix"></div>
                <div class="marginBottom10 visible-xs-block"></div>
                <div class="row col-xs-12 margin0" style="margin-left:-6%">
                        <div class="col-md-6 col-xs-6">
                            <img src="http://res.cloudinary.com/dncu6pqpm/image/upload/v1424145156/honey_lawjsz.png" data-id="3" alt="" data-name="honey" />
                        </div>
                        <div class="col-md-6 col-xs-6">
                            <img src="http://res.cloudinary.com/dncu6pqpm/image/upload/v1424145156/vanilla_qptl2d.png" data-id="4" alt="" data-name="vanilla" />
                        </div>
                </div>
                <div class="clearfix"></div>
                <div class="marginBottom10 visible-xs-block"></div>
        </div>
        <div class="boxBtm"></div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-1 productmargintop5 paddingRound productsLeft" style="top:40%; left: 4%; position:relative"> = </div>
    <div class="col-xs-12 col-sm-6 col-md-3 productmargintop5 paddingRound productsLeft">
        <div class="boxTop"></div>
        <div class="box">
        </div>
        <div class="boxBtm"></div>
    </div>
</div>

和我的剧本

  $(document).ready(function () {

         // Panel1 is working as expected      
         $("#panel1 .row img").click(function () { 
            $("#panel1 .row img").removeClass("BlackcherryCircle");
            $("#panel1 .row img").removeClass("CoconutCirle");
            $("#panel1 .row img").removeClass("MangoCircle");
            $("#panel1 .row img").removeClass("StrawberryCircle");
            $("#hdnPanel1").val('');

            var name = $(this).attr("data-name");

            var id = $(this).attr("data-id");

            switch (name) {
                case "blackcherry":
                    $(this).addClass('BlackcherryCircle');
                    break;
                case "coconut":
                    $(this).addClass('CoconutCirle');
                    break;
                case "mango":
                    $(this).addClass('MangoCircle');
                    break;
                case "strawberries":
                    $(this).addClass('StrawberryCircle');
                    break;
                default:
            }

            $("#hdnPanel1").val(id);


        });


        // Panel2 has the issue it will not apply the CSS Class for the image clicked
        $("#panel2 .row img").click(function () {
            $("#panel2 .row img").removeClass("ChocolateCircle");
            $("#panel2 .row img").removeClass("CinnamonCircle");
            $("#panel2 .row img").removeClass("HoneyCircle");
            $("#panel2 .row img").removeClass("VanillaCircle");
            $("#hdnPanel2").val('');

            var name = $(this).attr("data-name");
            var id = $(this).attr("data-id");

            switch (name) {
                case "chocolate":
                    $(this).addClass('ChocolateCircle'); // Will not apply the CSS Class
                    break;

                case "cinnamon":
                    $(this).addClass('CinnamonCircle'); // Will not apply the CSS Class
                    break;

                case "honey":
                    $(this).addClass('HoneyCircle'); // Will not apply the CSS Class
                    break;

                case "vanilla":
                    $(this).addClass('VanillaCircle'); // Will not apply the CSS Class
                    break;


                default:
            }

            $("#hdnPanel2").val(id);
        });
    });

我创建了一个JSFiddle here，因为我不能100％确定出现了什么问题，不会显示圆圈的图像位于panel2内

Answer 1

我认为问题是图像......第一个面板中的图像具有透明背景，而第二个图像中没有透明背景。

因此，尝试使用透明背景的图像

body {
  background-color: lightgrey;
}

<img src="http://res.cloudinary.com/dncu6pqpm/image/upload/v1424145153/black_cherries_snbvu8.png" data-id="1" alt="" data-name="blackcherry" />
<img src="http://res.cloudinary.com/dncu6pqpm/image/upload/v1424145156/honey_lawjsz.png" data-id="3" alt="" data-name="honey" />

Answer 2

这是因为您在面板1中使用的图像具有透明背景。在面板2中，图像具有纯白色背景。

单击图像时圆圈不显示，但适用于其他人

2 个答案: