我正在构建一个HtmlPartial,作为MVC解决方案的一部分用于导航。所有的CSS、HTML和JavaScript都包含在partial中。我想通过jQuery .each()函数运行导航步骤,将CSS类“current”添加到导航中的当前页面,但该函数从未执行(调试器点击它并跳过它)。我能做错什么?提前感谢!
var myURL = 'https://example.com/path/sftpaccount';
var arrURL = myURL.split('/');
// I was originally using window.location.pathname instead of the full URL
var thisView = arrURL[arrURL.length - 1].toLowerCase();
console.log(thisView);
console.log($('.navStep').length);
$('.navStep').each(function() {
if (thisView == $(this).data('viewName').toLowerCase()) {
$(this).addClass('current');
} else {
$(this).removeClass('current');
}
})
.current { text-decoration: underline;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<div class="row navRow">
<div class="col-md-3 text-center navStep" data-viewName="sftpaccount" onclick="window.location = '/Integration/SftpAccount';">
<div class="stepFirst">Step 1</div>
</div>
<div class="col-md-3 text-center navStep" data-viewName="sftp_columnmapping" onclick="window.location = '/Integration/Sftp_ColumnMapping';">
<div class="step">Step 2</div>
</div>
<div class="col-md-3 text-center navStep" data-viewName="sftp_documentmapping" onclick="window.location = '/Integration/Sftp_DocumentMapping';">
<div class="step">Step 3</div>
</div>
<div class="col-md-3 text-center navStep" data-viewName="sftp_usermapping" onclick="window.location = '/Integration/Sftp_UserMapping';">
<div class="stepLast">Step 4</div>
</div>
</div>
1条答案
按热度按时间m4pnthwp1#
检索值时,数据属性名称使用小写。
字符串
您应该始终在数据属性中使用小写以避免此类问题。