Застрял с использованием onClick открытия Диалоговое окно

Question

Очень новое для этого и застряло уже с командой onClick, и это меня озадачивает.

Что должно произойти: Пользователь нажимает на текст корзины покупок (в стиле div, который был создан), и открывается диалоговое окно, содержащее содержимое корзины пользователей.

Вот код ниже ...

Я думаю, что я сделал чуть больше, чтобы на этой неделе, как я, вероятно, отсутствует что-то очень легко, и я просто глупо.

Любая помощь будет высоко оценена.

Скопировать код

<script type="text/javascript"> 
$(function() { 
$('div.dialog').dialog({modal:true,autoOpen:false}); 
$('CartLink').on('click', function() { 
    var index = $(this).index() + 1; 
    $('#dialog' + index).dialog('open'); 
}); 
}); 
</script> 

    <div class="dialog" id="dialog1">Shopping Cart Contents</div> 

<div id="CartLink" class="fluid ShoppingCart"><img src="images/Site/Shopping_cart.gif"   
alt="" width="25" height="23"/>Shopping Cart</div> 

Answer 1

Кажись, как вы пропустили # целевой id здесь

$('#CartLink').on('click', function() { 
//-^ here ----- 
    var index = $(this).index() + 1; 
    $('#dialog' + index).dialog('open'); 
}); 

---

Вам нужно изменить:

var index = $(this).index() + 1; 

к:

var index = $(this).index(); 

, потому что в настоящее время index из ваших #CartLink является 1 не 0 как то, что вы ожидали. Поэтому вам больше не нужно увеличивать его на 1.

Answer 2

У вас не хватает # до id selector

$(function() { 
    $('div.dialog').dialog({modal:true,autoOpen:false}); 
    $('#CartLink').on('click', function() { 
    //.^.....add # here....... 
     var index = $(this).index(); 
     $('#dialog' + index).dialog('open'); 
    }); 
}); 

Answer 3

Не надейтесь на .index(), чтобы соединить ваши диалоги (диалоги) с кнопками. Пример, который вы задали, работал, потому что в настоящее время, div#CartLink - второй ребенок в своем родительском узле, но любая модификация вашего html (добавление заголовка в ваш div, перемещение кнопки на другую часть экрана и т. Д.).) нарушит это предположение.

Один простой способ это поставить диалоговое идентификатор целевого явно пользовательского атрибута:

<div id="dialog1">...</div> 
<div id="CartLink" data-dialog="dialog1" class="...">...</div> 


$('#CartLink').on('click', function(){ 
    var id = $(this).attr('data-dialog'); 
    $('#'+id).dialog('open'); 
});