Помогите с несколькими изображениями наведите курсор мыши - PullRequest
Новая
       10

Помогите с несколькими изображениями наведите курсор мыши

2 голосов
/ 14 мая 2011

Эй, ребята, извините, я новичок в Jquery. Я всегда пытался сделать все с помощью CSS, но я пытаюсь значительно сократить свой код для веб-сайта. Я пытаюсь сделать так, чтобы при наведении одного файла div.class img он одновременно изменял исходный файл 2 изображений. Я могу добиться этого, но мне нужно, чтобы эти два изображения имели разные исходные файлы. Я также пытаюсь сделать код достаточно простым, чтобы я мог установить свой источник изображения в HTML и не устанавливать каждое изображение в сценарии. Причиной этого является фактическое приложение будет иметь несколько 100 изображений. Определение состояний ролловера в CSS и в скрипте слишком громоздкое и грязное.

Вот что у меня есть. 

    <script>
    $(function() {
       $(".on img").hover(
            function() {
    $(".on img").attr("src", $(".on img").attr("src").split(".").join("_hover."));
}, 
function() {
    $(".on img").attr("src", $(".on img").attr("src").split("_hover.").join("."));
        });
   });

    </script>

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

Проблема сейчас в том, что, когда все изображения в этом классе меняются, все они переходят на тот же источник изображения, где мне нужно, чтобы они переключились на собственный источник изображения. Таким образом, x.jpg становится x_hover.jpg, а y.jpg становится y_hover.jpg и т. Д.

Вот HTML-код для этого примера. 

    <div class="on"><img src="api.jpg" /> </div>
    <div class="on"><img src="ex.jpg"  /></div>
    <div class="on"><img src="api.jpg" /> </div>
    <div class="on"><img src="ex.jpg"  /></div>

Спасибо !! Любой, кто может помочь, будет с благодарностью. Я новичок в Jquery, и я искал несколько дней, как это сделать.

* 1015-jk *

Ответы [ 3 ]

2 голосов
/ 14 мая 2011

Самый простой способ, которым я мог бы придумать для этого, изменить src элемента наведения: 

$('.on img').hover(
    function(){
        var cur = this.src.split('.');
        var extension = cur.pop();
        this.src = cur.join('.') + '_hover.' + extension;
    },
    function(){
        this.src = this.src.replace('_hover','');
    }
);

JS Fiddle demo .

<ч /> Отредактировано в ответ на вопрос, в комментариях к этому ответу от @Jamie:

Знаете ли вы, как я могу применить это ко ВСЕМ изображениям, которые находятся в этом классе div, но у каждого изображения есть собственное изображение? Например: a.jpg изменить на a_hover.jpg, затем вернуться к a.jpg, а b.jpg изменить на b_hover.jpg, а затем вернуться к b.jpg. Я хочу, чтобы все эти изображения изменялись одновременно, если курсор наведен на изображение в этом классе div.

Следующий скрипт jQuery позаботится об этом за вас: 

$('.on img').hover(
    function(){
        $('.on img').each(
            function(){
                var cur = this.src.split('.');
                var extension = cur.pop();
                this.src = cur.join('.') + '_hover.' + extension;
            });
    },
    function(){
        $('.on img').each(
            function(){
                this.src = this.src.replace('_hover','');
            });
    }

);

JS Fiddle demo .

Отредактировано для исправления вышеуказанного URL, который по какой-то причине относился к изображению, а не к демонстрации. Глупый я ... это сейчас ссылки на фактическую демонстрацию. К сожалению.

1 голос
/ 14 мая 2011

Просто мой дубль с регулярным выражением 

$('.on img').hover(function() {
  this.src = this.src.replace(/(.*)(\.[^.]+)$/, '$1_hover$2');
}, function() {
  this.src = this.src.replace(/_hover(\.[^.]+)$/, '$1');
});

Fiddle: http://jsfiddle.net/nWc2D/

0 голосов
/ 14 мая 2011

попробуйте это: 

$(function() {
    $(".on img").hover(
            function() {
                   $(this).attr("src", $(this).attr("src").split(".").join("_hover."));
            } , 
            function() {
                   $(this).attr("src", $(this).attr("src").split("_hover.").join("."));
           });
   });

В этом контексте $(this) даст вам изображение в поиске, а не все изображения с этим классом.

...