jQuery: Как я могу связать несколько элементов одного класса? - PullRequest
Новая
       1

jQuery: Как я могу связать несколько элементов одного класса?

0 голосов
/ 20 апреля 2011

Я создал раздел, который я хочу заполнить другим встроенным видео, основываясь на том, какую ссылку в серии ссылок ниже этого раздела нажимает пользователь. В настоящее время функция работает только для верхней ссылки в списке. Нажатие на любую из ссылок под первой не дает никакого эффекта. Вот JS: 

$(document).ready(function(e){
$('a.videoBoxLinks').bind('click',function(e){
var vidUrl = $(this).attr('href');
var vidBox = $(this).prev('.videoBox');
vidBox.html('<iframe src="' + vidUrl + '" width="400" height="300" frameborder="0"></iframe>');
e.preventDefault(); //stops the browser click event
});
});

и HTML 

<div class="videoBox">
<h1>default content to be replaced</h1>
</div>
<a class="videoBoxLinks" href="videoURL1">Test 1</a></br> <!--this one works-->
<a class="videoBoxLinks" href="videoURL2">Test 2</a> <!--this one doesn't-->

Ответы [ 4 ]

2 голосов
/ 20 апреля 2011

вместо 

var vidBox = $(this).prev('.videoBox');

использование 

var vidBox = $(this).prevAll('.videoBox');

.prev найдет только непосредственно предшествующего брата, а .prevAll найдет всех предшествующих братьев и сестер.

0 голосов
/ 20 апреля 2011

Проверьте следующий код. У меня это работает.

HTML: 

<div id="videoBox">
    <h1>
        default content to be replaced</h1>
</div>
<a class="videoBoxLinks" href="videoURL1">Test 1</a><br />
<!--this one works-->
<a class="videoBoxLinks" href="videoURL2">Test 2</a>

Сценарий: 

<script type="text/javascript">
    $(document).ready(function (e) {
        $('a.videoBoxLinks').bind('click', function (e) {
            var vidUrl = $(this).attr('href');
            //var vidBox = $(this).prev('.videoBox');
            $("#videoBox").html('<iframe src="' + vidUrl + '" width="400" height="300" frameborder="0"></iframe>');                
            e.preventDefault(); //stops the browser click event
        });
    });

</script>
0 голосов
/ 20 апреля 2011

Я бы сделал это так 

$('a.videoBoxLinks').bind('click',function(e){
    link = $(this);
    // if the iframe does not exists
    if ($('div.videoBox iframe').length == 0) {
        // create the iframe
        $('div.videoBox').html('<iframe width="400" height="300" frameborder="0"></iframe>');
    }
    // set the source of the iframe
    iframe = $('div.videoBox iframe').attr('src', link.attr('href'));
    e.preventDefault(); //stops the browser click event
});
0 голосов
/ 20 апреля 2011

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

Это должно как минимум начать.

...