Question

我写了一个我的投资组合的脚本，它的工作方式几乎是我想要的，但是我想这样做，所以我不需要编辑脚本，只需编辑HTML。

代码基本上需要这样做：

计算<img>

#thumbs

从拇指拿走SRC，或者从拇指周围的A标签拿HREF
放置SRC（从文件名中减去_sm）或HREF放入变量

之后我想我可以弄清楚如何让它发挥作用。我只是不知道如何让脚本读取信息并根据它进行更改。一旦我设置了变量，我就能很容易地弄清楚它。

这是我的代码：

<script type="text/javascript">
        $(document).ready(function() {
            // the last thumbnail I clicked on
            var last = "idthisperson";

            // variables based on IDs
            // this meathod is too sloppy in my opinion
            var graphic01 = "idthisperson";
            var graphic02 = "leo";
            var graphic03 = "water-fire";

            // my test of counting how many
            // img tags are within #thumbs
            var n = $("#thumbs img").length;        
            alert(n);

            // seperate functions based on the img ID
            // that you clicked on. Would like one function.
            $("#" + graphic01).click(function() {
                if(last != graphic01) {
                    $("#placeholder").before( "<img src=\"gallery/" + graphic01 + ".jpg\" />" );
                    $("#mask").css("marginTop","-=450px");
                    last = graphic01;
                }
            });

            $("#" + graphic02).click(function() {
                if(last != graphic02) {
                    $("#placeholder").before( "<img src=\"gallery/" + graphic02 + ".jpg\" />" );
                    $("#mask").css("marginTop","-=450px");
                    last = graphic02;
                }
            });

            $("#" + graphic03).click(function() {
                if(last != graphic03) {
                    $("#placeholder").before( "<img src=\"gallery/" + graphic03 + ".jpg\" />" );
                    $("#mask").css("marginTop","-=450px");
                    last = graphic03;
                }
            });

        });
    </script>

HTML：

   <section id="portfolio">
    <section id="mask">
        <img src="gallery/idthisperson.jpg" />
        <div id="placeholder"></div>
    </section><!--/#mask-->
</section><!--/#portfolio-->
<section id="thumbs">
    <a href="gallery/idthisperson.jpg"><img id="idthisperson" src="gallery/idthisperson_sm.jpg" /></a>
    <a href="gallery/leo.jpg"><img id="leo" src="gallery/leo_sm.jpg" /></a>
    <a href="galelry/water-fire.jpg"><img id="water-fire" src="gallery/water-fire_sm.jpg" /></a>
    <a href="gallery/idthisperson.jpg"><img src="gallery/idthisperson_sm.jpg" /></a>
</section><!--/#thumbs-->

编辑：现场演示：http://beta.jacobbearce.com/portfolio.htm
编辑2：在点击下一个缩略图之前，如何使用transitionend位javascript来确保我的CSS3过渡完成？
编辑3：在现场演示中查看源代码最好查看完整代码。

Answer 1

<强> 1。计算#thumbs中的标签数量

numOfImgTags = $('#thumbs img').length;

<强> 2。从拇指拿走SRC，或者从拇指周围的A标签拿HREF

imgSrc = $('#thumbs img').attr('src');
aHref = $('#thumbs img').parent('a').attr('href');

第3。放置SRC（从文件名中减去_sm），或在变量中放置HREF

imgSrcVariable = imgSrc.replace('_sm','');
//the aHref variable above already does this

这足以让你前进吗？

Answer 2

您可以使用 ID href创建一个可以与Thumb div中的任何 ~~<img>~~ <a>标记一起使用的函数strike> image 链接作为图形的名称。

$("#thumbs a").click(function() {
    var graphic = $(this).attr('href'); //get the href of the anchor
    if(last != graphic) {
        $("#placeholder").before( "<img src=\"" + graphic + "\" />" );
        $("#mask").css("marginTop","-=450px");
        last = graphic;
    }
    return false; //makes the browser not redirect the user
});

编辑：更改了我的代码以匹配原始问题的编辑。

Answer 3

试试这个：

var n=0;
var images=[];
$('#thumbs img').each(function(){
    n=n+1; //increase the number of images
    images[n]=$(this).attr('src').replace('_sm',''); //we place the src in the appropriate index, i left the 0 index without value just to avoid confusion
});

现在，对于图像编号x，您可以使用以下方法访问源：images [x];

希望这会有所帮助

根据元素数量更改点击变量 - jQuery

3 个答案: