Question

我在页面上有图像，点击图像我想检查其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>

谢谢和问候，

Answer 1

如果我把它弄好，你需要这样的东西

$(document).ready(function () {
    $("img").click( function() {
        var t = $(this);
        t.prevAll().removeClass('lower').addClass('upper');
        t.nextAll().removeClass('upper').addClass('lower');
    })
})

Answer 2

波纹管代码可以根据我的理解你的问题获得你想要的东西



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

$(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'); } }); }); }); 如果这对您有用，请告诉我

Answer 3

您可以使用子函数循环父div（名为mImageFlow）来完成此操作。如何做到这一点，因为你可以利用下面的代码。

$(document).ready(function () {
    $("div[id$='myImageFlow']").children().each(function(){
        if($(this).attr('alt') > selectedImage)
        {
            $(this).addClass('t1');
        }else{
            $(this).addClass('t2');
        }
    }); 
});

动态地将图像添加到div

3 个答案: