Ответ 1
Да. Как вы указали, не используйте идентификаторы и идентификаторы в вашем JavaScript. Вместо этого используйте селектор классов:
Например, на ваш взгляд разметка:
<div class="container">Partial View content</div>
JS:
var $div = $('div.container');
// do something
Чтобы исключить возможность выбора других тегов с тем же именем класса, назначьте программное имя элементам в частичном представлении, которое используется только как дескриптор селектора, а не как класс CSS.
В то время как поиск по ID основан на лучшей производительности, в этом случае имеет смысл искать поиск по методу [tag + class], чтобы избежать конфликтов идентификаторов. Поиск по методу [tag + class] довольно близок к селекторам id с точки зрения производительности.
Кроме того, вы можете добиться дальнейшего улучшения, ограничив область поиска:
<div class="container">Partial View content <span class="child">Child content </span></div>
var $span = $(span.child') // scope of lookup here is entire document
Однако, если вы знаете, что child находится внутри контейнера div, вы можете ограничить область, говоря:
var $div = $('div.container').children('span.child'); // or just '.child'
Другим советом является однократное выполнение поиска и его повторное использование:
// less performant
function doSomething() {
// do something here
$('div.container').css('color', 'red');
// do other things
$('div.container').find('.child');
// do more things
$('div.container').click(function() {...});
}
// better
function doSomething() {
var $div = $('div.container');
// do something here
$div.css('color', 'red');
// do other things
$div.find('.child');
// do more things
$div.click(function() {...});
// or chaining them when appropriate
$('div.container').css('color', 'red').click(function() { ... });
}
Обновление: Рефакторинг сообщения OP для демонстрации концепции:
<script type="text/javascript">
function SetProductTabContent(selectedTab, ctx) {
var $container = $("div.pv_productDescriptionContent", ctx);
// this will find only the immediate child (as you had shown with '>' selector)
$container.children('div').css('display', 'none');
switch (selectedTab) {
case '#tab-1':
$('div.pv_productDescriptionText', $container).css('display', 'block');
// or $container.children('div.pv_productDescriptionText').css('display', 'block');
break;
case '#tab-2':
$('div.pv_productSpecificationText', $container).css('display', 'block');
// or $container.children('div.pv_productSpecificationText').css('display', 'block');
break;
}
function SetUpMenuItems(ctx) {
// Get all the menu items within the passed in context (parent element)
var menuItems = $("div.pv_productMenu a", ctx);
// Select the first tab as default
menuItems.first().addClass("menuItemActive");
// Handle the look of the tabs, when user selects one.
menuItems.click(function () {
var item = $(this);
// Get content for the selected tab
SetProductTabContent(item.attr('href'), ctx);
menuItems.removeClass("menuItemActive");
item.addClass("menuItemActive");
return false;
});
}
</script>
<div style="" class="pv_productMenu">
<a href="#tab-1">
<div class="menuItemHeader">
Menu1</div>
</a><a href="#tab-2">
<div class="menuItemHeader">
Menu2
</div>
</a>
</div>
<div class="pv_productDescriptionContent">
<div class="pv_productDescriptionText" style="display: none;">
<%: Model.Product.Description %>
</div>
<div class="pv_productSpecificationText" style="display: none;">
<%: Model.Product.Description2%>
</div>
</div>
Примечание. Я удалил оболочку document.ready, так как это не будет срабатывать при загрузке частичного представления. Вместо этого я реорганизовал ваш View JS, чтобы вызвать функцию настройки, а также передать в область действия (что позволит избежать выбора других div с тем же классом):
// Fetch content in the background
$.get(url, input, function (result, response) {
$('#dialogBox').html(result);
SetUpMenuItems($('#dialogBox'));
});
Очевидно, что вы можете изменить это дальше, как вы сочтете подходящим в своем приложении, то, что я показал, является идеей, а не окончательным решением.
- Если вы снова загрузите
#dialog, они перезапишут существующую разметку, поэтому не будет дубликатов. - Если вы снова загрузите частичный вид в другом контейнере, вы можете передать это как контекст и который не позволит вам получить доступ к
children#dialog - Я применил этот произвольный префикс
pv_для программных дескрипторов классов. Таким образом, вы можете сказать, глядя на имя класса, если оно предназначено для CSS или для использования в вашем script.