Как сократить эту функцию jquery?

Question

поэтому у меня есть 3 на 3 таблицы, как это:

<table border="1"> 
    <tr> 
    <td><img src="blank.png" alt="blank" id="one"/></td> 
    <td><img src="blank.png" alt="blank" /></td> 
    <td><img src="blank.png" alt="blank" /></td> 
    </tr> 
    <tr> 
    <td><img src="blank.png" alt="blank" /></td> 
    <td><img src="blank.png" alt="blank" /></td> 
    <td><img src="blank.png" alt="blank" /></td> 
    </tr> 
    <tr> 
    <td><img src="blank.png" alt="blank" /></td> 
    <td><img src="blank.png" alt="blank" /></td> 
    <td><img src="blank.png" alt="blank" /></td> 
    </tr> 
</table> 

в моей JavaScript, у меня есть:

$("#one").click(function() { 

    var src = $("#one").attr("src"); 

    if (src == "blank.png") { 
     $(this).attr("src", "hello.png"); 
    } 
    else if (src == "hello.png") { 
     $(this).attr("src", "hi.png"); 
    } 

    else { 
     $(this).attr("src", "blank.png"); 
    }  
}); 

это переключает первую ячейку таблицы между 3 изображения, когда пользователь нажимает на Это. Я знаю, что если у меня есть все 9 уникальных идентификаторов для каждой ячейки, это сработает, но я не хочу иметь целый беспорядок кодов в моем javascipt. так как мне его сократить?

Answer 1

Если все элементы проходят через тот же цикл изображений вы можете использовать класс и применить событие для всех из них. Например:

<td><img src="blank.png" alt="blank" class="image-cycle"/></td> 

И связать свой JavaScript для всех элементов этого класса:

$('.image-cycle').click(function() { 
    // your code 
    // the only thing that will have to change is 
    var src = $(this).attr("src"); 
} 

Answer 2

Используйте переключатель заявление

$("#one").click(function() { 
switch(this.getAttribute("src")){ 
    case "blank.png":this.setAttribute("src","hello.png");break; 
    case "hello.png":this.setAttribute("src","hi.png");break; 
    default:this.setAttribute("src","blank.png");break; 
} 
}); 

здесь демо: http://jsfiddle.net/9jMHS/1

Answer 3

Я не знаю, как чистить это, но не следует что-то вроде этой работы?

$("#one").click(function() { 
    var src = $(this).attr("src"); 
    var img = ["blank.png", "hello.png", "hi.png"]; 
    $(this).attr("src", img[(img.indexOf(src.toLowerCase())+1)%3]); 
}); 

Answer 4

Вы можете сопоставить источники объекта, например:

$("#one").click(function() { 
    var srcs = { 
     "blank.png": "hello.png", 
     "hello.png": "hi.png", 
    }, src = $("#one").attr("src"); 

    $(this).attr("src", srcs[src] || "blank.png"); 
}); 

Таким образом, вы избежите неуклюжего и неприглядного switch заявления и можете легко расширить объект добавить еще src с.

Answer 5

var src = this.getAttribute("src"); 

this.src = src == "blank.png" ? "hello.png" : 
      src == "hello.png" ? "hi.png" : 
           "blank.png";