Question

我有这个jQuery函数，允许我点击图像并应用css类。如果单击具有相同类的其他元素，则会删除前一个元素上的同一个类。它工作正常，除了我必须在应用#!/bin/bash COMMAND="mongo <args>" OUTPUT=$(${COMMAND}) function STDERR { cat - 1>&2 } function STDFILE { if [ -z "$1" ]; then return fi cat - >> $1 } WRITE_ERR=0; for line in $OUTPUT; do if [[ "$line" == "<STDERR>"* ]]; then WRITE_ERR=1 continue elif [[ "$line" == "</STDERR>"* ]]; then WRITE_ERR=0 continue fi if [ "$WRITE_ERR" -eq "1" ]; then printf "%s\n" "$line" | STDERR else printf "%s\n" "$line" fi done类之前点击元素两次。

我认为错误与函数中的顺序有关，但我不确定是什么问题。

这是jQuery：

exampleimgopen

这是html：

jQuery(document).ready(function($) {
    $('.exampleimg').click(function() {
        $('.exampleimgopen').removeClass('exampleimgopen');
        $(this).toggleClass('exampleimgopen');
        $('.exampleimg').toggleClass('exampleimgclose');
    });
});

这是css：

    <div id="examples">
        <p>Examples:</p>
        <img src="img/1.png" class="exampleimg">
        <img src="img/2.png" class="exampleimg">
        <img src="img/3.png" class="exampleimg">
        <img src="img/4.png" class="exampleimg">
        <img src="img/5.png" class="exampleimg">
        <img src="img/6.png" class="exampleimg">
    </div>

Answer 1

这其实很简单。

在CSS .exampleimg内，使用过渡宽度。您的img元素不需要任何额外的课程。

像这样：

.exampleimg {
    padding:10px 0px 10px 0px;
    width:300px;
    margin:0 20px 0 20px;
    transition: width 500ms; // substitute 500ms for whatever you require
}

现在，修改所有 HTML img元素，如下所示：

<img src="img/1.png" class="exampleimg" onClick="enlarge();"> <!-- notice onclick event !-->

你 jQuery 现在应该采取以下措施：

function enlarge(){
    if(!$(this).hasClass('exampleimgopen')){ // if clicked image isn't enlarged
        $('.exampleimg').removeClass('exampleimgopen'); // make all other image smaller
        $(this).addClass('exampleimgopen'); // make this image larger
    } else { // if image is enlarged
        $(this).removeClass('exampleimgopen'); // make the image smaller
    }
}

希望这有帮助！

现在，当用户点击图像时，它应该放大它并使任何其他选定的图像变小。如果他们点击已放大的图像，它将再次变小。

不仅如此，它们都应该缓解500毫秒。

Answer 2

查看this fiddle

你很接近 - 只是没有正确添加/删除这些类。

这是一种有效的方法（来自小提琴）

jQuery(document).ready(function($) {
    $('.exampleimg').click(function() {
        $('.exampleimg').removeClass('exampleimgopen exampleimgclose');
        $(this).addClass('exampleimgopen');
        $('.exampleimg').not(this).addClass('exampleimgclose');
    });
});

Answer 3

您可以通过简化代码来解决问题，例如：当图像关闭时，你不需要添加exampleimgclose（因为你的样式说它只是有宽度和过渡，而不是实际关闭）。之后，您只需要在实际打开时控制向图像添加类。

请参阅我为您制作的 JSFIDDLE ，并阅读我在JavaScript代码旁边发表的评论。

以下相关代码：

HTML：

<div id="examples">
  <p>Examples:</p>
  <img src="http://placehold.it/620x100" class="example-img">
  <img src="http://placehold.it/620x100" class="example-img">
  <img src="http://placehold.it/620x100" class="example-img">
</div>

CSS：

#examples {
  background-color: white;
  color: black;
  text-align: center;
  padding: 5px 5px 5px 5px;
}

.example-img {
  padding: 10px 0px 10px 0px;
  width: 300px;
  margin: 0 20px 0 20px;
  transition: 0.5s width ease;
}

.example-img:hover {
  opacity: 0.8;
  cursor: pointer;
}

.example-img-open {
  width: 620px;
}

JavaScript的：

jQuery(document).ready(function($) {
  $('.example-img').click(function() {
    // When clicking an image which is already open, close it
    if ($(this).hasClass("example-img-open")) {
      $(this).removeClass("example-img-open");
    }
    // When clicking an image which is not yet open, open it and close all previously opened
    else {
      $('.example-img').removeClass("example-img-open"); // Closes all others
      $(this).addClass("example-img-open");
    }
  });
});

你可能也注意到我为这些课使用了不同的名字。我这样做只是因为很难阅读以前的代码，你可以随意更改它们。

干杯。

Answer 4

在var flexActiveControlNavs = slider.controlNav.find(".flex-active"); jQuery.each(flexActiveControlNavs, function(i, val) { var dom_object = flexActiveControlNavs.eq(i).find('img').attr('src'); console.log(dom_object); });处理程序方法中，只需从所有click元素中删除open类。将img.exampleimg类添加到所有close元素，并与当前单击的元素完全相反。

img.exampleimg

jQuery减速removeClass

4 个答案: