Question

我正在开展一个项目，当我选择同一行中的另一个项目时，我需要更改项目的指示样式。我还需要在除所选项目之外的所有其他项目上显示叠加层。

现在我有工作代码突出显示所选项目，并使叠加显示，但我缺乏经验让我混淆如何使这项工作如上所述。这是代码供参考。

$(".prod_link").bind('click', function(){
    $(this).find("img").addClass('glow');
    $(this).parent().parent().find(".after").css("display", "block");
});

.prod_thumb{height: 100px; width: 100px;}
.prod_thumb:hover{
	margin: 10px auto;
	height: 95px;
	width: 95px;
	background-color: #cd1041;
	-webkit-box-shadow: 0px 0px 10px 2px rgba(205, 16, 65, .75); 
	-moz-box-shadow: 0px 0px 10px 2px rgba(205, 16, 65, .75);
	box-shadow: 0px 0px 10px 2px rgba(205, 16, 65, .75);
	-webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
	-ms-transition: all 0.3s ease-out; /* IE10 is actually unprefixed */
	-o-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
}
.glow {
	margin: 5px auto;
	height: 95px;
	width: 95px;
	background-color: #cd1041;
	-webkit-box-shadow: 0px 0px 10px 2px rgba(205, 16, 65, .75); 
	-moz-box-shadow: 0px 0px 10px 2px rgba(205, 16, 65, .75);
	box-shadow: 0px 0px 10px 2px rgba(205, 16, 65, .75);
}
.image-container { position: relative; }
.image-container .after { position: absolute; top: 5px; width: 95px; height: 95px; display: block; background: rgba(255, 255, 255, .6); }
.image-container .after:hover{opacity: 0; transition: 0.3s;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="col-sm-2 image-container">
  	<a data-toggle="modal" data-target=".prod_modal" class="prod_link">
		  <img src="img/kitchen/cookware2.jpg" class="img-responsive prod_thumb"/>
	    <div class="after" style="display: none;"></div>
    </a>
  </div>
  <div class="col-sm-2 image-container">
	  <a data-toggle="modal" data-target=".prod_modal" class="prod_link">
	    <img src="img/kitchen/cookware3.jpg" class="img-responsive prod_thumb"/>
      <div class="after" style="display: none;"></div>
    </a>
  </div>
  <div class="col-sm-2 image-container">
   	<a data-toggle="modal" data-target=".prod_modal" class="prod_link">
	  	<img src="img/kitchen/cookware4.jpg" class="img-responsive prod_thumb"/>
	    <div class="after" style="display: none;"></div>
    </a>
  </div>
  <div class="col-sm-2 image-container">									
	  <a data-toggle="modal" data-target=".prod_modal" class="prod_link">
	    <img src="img/kitchen/cookware5.jpg" class="img-responsive prod_thumb"/>
  	  <div class="after" style="display: none;"></div>
	  </a>
  </div>
</div>

任何帮助将不胜感激。

Answer 1

事实证明，就我的标记和我的jQuery而言，我正在以错误的方式接近它。最大的问题是img元素被不必要地嵌套，a元素完全不必要。单击某个项目时，将显示一个模态。如果用户点击了类add-item的按钮，则点击的图片会添加glow，并且blur会添加到同一轮播中的其余图片中。（忽略jQuery中的xajax调用，我在项目中移动之后想起了这篇文章，使其更具动态性。）

正确的代码如下。

HTML：

<div class="item active">
    <div class="row" id="row-1">
        <div class="col-sm-2 col-sm-offset-1 thumb" id="thumb-1" data-pid="1" data-toggle="modal" data-target="#product_modal">
            <img src="img/kitchen/dinnerware1.jpg" class="img-responsive prod_thumb"/>
        </div>
        <div class="col-sm-2 thumb" id="thumb-2" data-pid="2" data-toggle="modal" data-target=".prod_modal" >
            <img src="img/kitchen/dinnerware2.jpg" class="img-responsive prod_thumb"/>
        </div>
        <div class="col-sm-2 thumb" id="thumb-3" data-pid="3" data-toggle="modal" data-target=".prod_modal" >
            <img src="img/kitchen/dinnerware3.jpg" class="img-responsive prod_thumb"/>
        </div>
        <div class="col-sm-2 thumb" id="thumb-4" data-pid="4" data-toggle="modal" data-target=".prod_modal" >
            <img src="img/kitchen/dinnerware4.jpg" class="img-responsive prod_thumb"/>
        </div>
        <div class="col-sm-2 thumb" id="thumb-5" data-pid="5" data-toggle="modal" data-target=".prod_modal" >
            <img src="img/kitchen/dinnerware5.jpg" class="img-responsive prod_thumb"/>
        </div>
    </div>
</div>

CSS：

.blur{
    width: 100px; height: 100px;
    filter: url(../img/blur.svg#blur); /* Firefox fix */
    -webkit-filter: blur(2px);
    filter: blur(2px);
    filter:progid:DXImageTranform.Microsoft.Blur(PixelRadius='3'); /* IE compatibility fix */
}

.blur:hover{
    -webkit-filter: blur(0px);
    filter: blur(0px);
    filter: none;
    filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='0'); /* IE compatibility fix */
}

jQuery的：

// add to cart btn on products
$(".add-item").bind('click', function(){
    $("div[id^='thumb-']").find('img').removeClass('glow').addClass('blur'); // remove glow from previous selection, add blur to all
    $('#thumb-' + sid).find('img').addClass('glow').removeClass('blur'); // add glow to current selection, remove blur

    var rowid = clid.split('-')[1]; // get the row number from clid
    $("#chkbox-"+ rowid).attr("src","img/checkedbox.png"); // swap empty_chkbox.png fro checkedbox.png

    // xajax_addToCart($(this).attr('data-pid'), $(this).attr('data-obj'));
});

$(".thumb").bind('click', function(e){
    sid = $(this).attr("data-pid"); // assign sid (selected id)
    clid = $(this).parent().attr('id'); // assign clid (checklist id)

    $("#product_modal").attr("data-pid", sid);

    xajax_view($(this).attr("data-pid")); // get information to populate modal
    e.preventDefault();
});

$("#product_modal").on("hidden.bs.modal", function(){
    // clear out selected id and checklist id
    sid = 0;
    clid = "";
});

如果您在下面看到我的代码有任何其他问题，请随时发表评论！我一直在努力改进！

jQuery在不同的选择上更改选定的项目样式

1 个答案: