所以我实现了一些 jQuery,基本上通过由 <a>
激活的 slider 来切换内容标签。现在考虑它,我宁愿让持有链接的 DIV 成为链接本身。
我正在使用的 jQuery 在我的脑海中看起来像这样:
<script type="text/javascript">
function slideonlyone(thechosenone) {
$('.systems_detail').each(function(index) {
if ($(this).attr("id") == thechosenone) {
$(this).slideDown(200);
}
else {
$(this).slideUp(600);
}
});
}
</script>
我将其用作索引类型框,因此当您单击 <a>
时会出现多个产品。标签曾经是图像*,它会在其下方呈现一些描述产品详细信息的内容:
<div class="system_box">
<h2>BEE Scorecard database</h2>
<p>________________</p>
<a href="javascript:slideonlyone('sms_box');"></a>
</div>
产品详细信息包装在这个 div 中。
<div class="systems_detail" id="sms_box">
</div>
因此,当您单击曾经是图像的内容时*,它将运行 slideonlyone('div_id_name') 函数。上面的函数然后首先关闭所有其他类名为“system details”的 div,然后打开/滑动带有传递给 slideonlyone 函数的 id 的 div。这样您就可以切换产品详细信息,而不是一次全部显示。
注意我只保留了 <a>
标签向您展示其中的内容,我将摆脱它。
注意:我的想法是将整个 div 包装在 <a>
中标记,但这是好的做法吗?
所以现在我想知道的是,既然您需要 JavaScript 来在 div 标签上运行 onclick,您如何编写它以便它仍然运行我的 slideonlyone 函数?
最佳答案
使用 obtrusive JavaScript (即内联代码)如您的示例所示,您可以使用 onclick
属性将 click 事件处理程序附加到 div
元素,如下所示:
<div id="some-id" class="some-class" onclick="slideonlyone('sms_box');">
...
</div>
但是, the best practice is unobtrusive JavaScript 您可以使用 jQuery 的 on()
方法或其速记 click()
轻松实现。例如:
$(document).ready( function() {
$('.some-class').on('click', slideonlyone('sms_box'));
// OR //
$('.some-class').click(slideonlyone('sms_box'));
});
在您的处理函数中(例如 slideonlyone()
在这种情况下)您可以引用触发事件的元素(例如 div
在这种情况下)与 $(this)
对象。例如,如果您需要它的 ID,您可以使用 $(this).attr('id')
访问它。
编辑
在阅读了您对下面@fmsf 的评论后,我发现您还需要动态引用要切换的目标元素。正如@fmsf 所建议的,您可以使用如下数据属性将此信息添加到 div
:
<div id="some-id" class="some-class" data-target="sms_box">
...
</div>
要访问元素的数据属性,您可以使用@fmsf 示例中的attr()
方法,但最佳做法是使用jQuery 的data()
方法像这样:
function slideonlyone() {
var trigger_id = $(this).attr('id'); // This would be 'some-id' in our example
var target_id = $(this).data('target'); // This would be 'sms_box'
...
}
注意 data-target
是如何通过 data('target')
访问的,没有 data-
前缀。使用数据属性,您可以将各种信息附加到元素,jQuery 会自动将它们添加到元素的 data object 中。 .
关于javascript - 运行 jQuery 函数 onclick,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14557862/