Изменение переменной по клику в зависимости от количества элементов - jQuery

Question

Я написал скрипт из своего портфолио, который работает почти так, как я хочу, но я бы хотел сделать это, чтобы мне никогда не приходилось редактировать скрипт, только HTML.

Код в основном должен сделать это:

1. Подсчитайте, сколько <img> тегов находится в #thumbs
2. Возьмите SRC с большого пальца или HREF, если возможно, с метки A вокруг большого пальца
3. Поместите либо 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-->

РЕДАКТИРОВАТЬ: Live демо: http://beta.jacobbearce.com/portfolio.htm
РЕДАКТИРОВАТЬ 2: Как я могу использовать бит transitionend javascript, чтобы убедиться, что мой переход CSS3 завершен, прежде чем нажать на следующий эскиз работает?
РЕДАКТИРОВАТЬ 3: Просмотр исходного кода на демо-версии лучше всего увидеть полный код.

Answer 1

Вы можете создать одну функцию, которая будет работать с любым тегом <img> <a> в элементе thumbs, используя ID href 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 2

1.Посчитайте, сколько тегов находится в пределах # thumbs

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

2.Возьмите SRC с большого пальца или HREF, если возможно, с метки A вокруг большого пальца

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 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];

надеюсь, это поможет