0

我在页面上有一个图像，单击图像时我想检查它的 alt 值，然后相应地添加到类中。例如，如果我单击 alt 值为 4 的图像，则 1、2、3 图像应该进入上层，5、7、8 应该进入下层。

如何实现这一目标..

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>ImageFlow</title>
    <meta name="robots" content="index, follow, noarchive" />
    <link rel="stylesheet" href="style.css" type="text/css" />

    <!-- This includes the ImageFlow CSS and JavaScript -->
    <link rel="stylesheet" href="imageflow.packedfunct2.css" type="text/css" />
    <script type="text/javascript" src="imageflow.packed.js"></script>
    <script type="text/javascript" src="jquery.js"></script>


     <script type="text/javascript">

    $(document).ready(function () {
      $("img").click(function(){
        var pos=$('img', this).attr('alt');
       alert('i am imageFlip'+this.alt);
       console.log('i am Image Flip');
        ('$this').addClass('t1');
              });
            });

       </script>


</head>
<body style="background-image:url('img2/Mesh2.png');background-repeat:no-repeat; background-size: cover; width=:'100%'">
    <h1>Sample For Image Slider</h1>




    <!-- This is all the XHTML ImageFlow needs -->
    <div id="myImageFlow" class="imageflow">

        <img src="img2/thumb1.jpg"   longdesc="" width="300" height="360" alt="1" />
        <img src="img2/thumb2.jpg"  longdesc="" width="300" height="360" alt="2" />
        <img src="img2/thumb3.jpg"   longdesc="" width="300" height="360" alt="3" />
        <img src="img2/thumb4.jpg"  longdesc="" width="300" height="360" alt="4" />
        <img src="img2/thumb5.jpg"   longdesc="" width="300" height="360" alt="5" />
        <img src="img2/thumb6.jpg"   longdesc="" width="300" height="360" alt="6" />
        <img src="img2/thumb7.jpg"   longdesc="" width="300" height="360" alt="7" />
        <img src="img2/thumb8.jpg"  longdesc="" width="300" height="360" alt="8" />
        <img src="img2/thumb9.jpg"  longdesc="" width="300" height="360" alt="9" />
        <img src="img2/thumb10.jpg"  longdesc="" width="300" height="360" alt="10" />
        <img src="img2/thumb11.jpg"  longdesc="" width="300" height="360" alt="11" />
        <img src="img2/thumb1.jpg"  longdesc="" width="300" height="360" alt="12" />
        <img src="img2/thumb2.jpg"  longdesc="" width="300" height="360" alt="13" />
        <img src="img2/thumb3.jpg"  longdesc="" width="300" height="360" alt="14" />
        <img src="img2/thumb4.jpg"  longdesc="" width="300" height="360" alt="15" />
    </div>

</body>

谢谢并恭祝安康，

4

3 回答 3

3

如果我接受它，你需要这样的东西

$(document).ready(function () {
    $("img").click( function() {
        var t = $(this);
        t.prevAll().removeClass('lower').addClass('upper');
        t.nextAll().removeClass('upper').addClass('lower');
    })
})
于 2013-05-02T06:50:01.187 回答
0

您可以通过使用子函数在父 div（命名为 mImageFlow）中循环来做到这一点。如何做到这一点，您可以参考下面的代码。

$(document).ready(function () {
    $("div[id$='myImageFlow']").children().each(function(){
        if($(this).attr('alt') > selectedImage)
        {
            $(this).addClass('t1');
        }else{
            $(this).addClass('t2');
        }
    }); 
});
于 2013-05-02T06:54:00.840 回答
0

根据我对您问题的理解，下面的代码将为您提供您想要的 

 $(document).ready(function () {

    $("#myImageFlow img").click(function(){

        var clickedImg = $(this).attr('alt');

        $("#myImageFlow img").each(function(){
            if($(this).attr('alt') > clickedImg)
            {
                $(this).addClass('t1');
            }else{
                $(this).addClass('t2');
            }
        });
    });
});

让我知道这是否适合您

于 2013-05-02T06:38:01.413 回答