Блог

Я пытаюсь заменить некоторый текст после подчеркивания в имени файла.

Пример имени файла: FileName_true.png . Мне нужно изменить его на FileName_false.png .

В принципе, у меня есть изображение, которое я хочу изменить, когда вы нажимаете на него. (цветной на черно-белый и наоборот). Я думал об использовании переключателя в jQuery, но я не был уверен, что смогу сделать это примерно с 5 изображениями, не дублируя код 5 раз.

Я думал создать функцию, которая использует регулярное выражение для записи ‘true’ или ‘false в имени файла изображения, на которое вы нажали, и замены его альтернативным.

Что вы думаете о выполнении этого? Я бы хотел, чтобы это было сделано на PHP, если возможно, но если нет, то на JavaScript / jQuery. Спасибо за любую помощь! И дайте мне знать, если у вас возникнут какие-либо вопросы.

 filename = filename.replace('_true','_false');
  

ни jQuery, ни regexp не нужны

 <img src="FileName_true.png"
onclick="this.src=(this.src.indexOf('_true')!=-1)?this.src.replace('true','false'):this.src.replace('false','true')" />
  

это то, что я мог придумать в этот поздний час

Делать это в php было бы просто глупо и потребовался бы файл cookie

Ответ mplungjan отличный, но позвольте мне предложить несколько альтернатив. Замену изображений лучше всего выполнять с помощью спрайта, чтобы никогда не возникало задержек при переключении между изображениями. Поместите обе версии изображения рядом друг с другом в один файл. Установите это изображение в качестве фона div и отрегулируйте положение фона для отображения того или иного изображения.

Предположим, что «pic1_bw_color_sprite.png» представляет собой цветное изображение размером 75×75 с черно-белым изображением размером 75×75 под ним, что делает конечное изображение 75 пикселей в ширину и 150 пикселей в высоту. Настройте свой css следующим образом:

 #pic1
{
    background-image: url(pic1_bw_color_sprite.png);
    height: 75px;
    width: 75px;
}
#pic1.bw
{
    background-position: 0px -75px;
}
  

Затем несколько простых jQuery, чтобы все это заработало:

 $("#pic1").click(function()
{
    $(this).toggleClass("bw");
});
  

Попробуйте это здесь: http://jsfiddle.net/gilly3/B7esz /

Что касается дублирования кода, то это единственное, чего jQuery очень хорошо умеет избегать. Просто используйте селектор, который включает каждый класс, которому требуется поведение:

 $("#pic1,#pic2,#pic3,#pic4").click(...);
// or
$(".bwSwap").click(...);
  

Чтобы сохранить текущее состояние в форме, чтобы вы могли обновлять свою базу данных, вам нужно получить ссылку на ваш элемент формы, затем задать value свойство (или .val() в jQuery).

 $("#pic1").click(function()
{
    $(this).toggleClass("bw");
    $("#pic1isBW").val($(this).hasClass("bw"));
});