更改 jQuery 加载代码

Altering a jQuery load code

本文关键字：代码 加载 jQuery 更改      更新时间：2023-09-26

嗨，有人可以帮助我更改此编码，我正在尝试删除 href 页面#.html 加载并使用带有文本的预加载 li 在单击链接时填充div。

<div id="sclit"></div>
<!-- old code
<a href="page1.html" class="para">Sci Lit 1</a>
<a href="page2.html" class="para">Sci Lit 2</a>
<a href="page3.html" class="para">Sci Lit 3</a>
-->
<ul style="display:none">
<li class="page1"> text text </li>
<li class="page2"> text text </li>
<li class="page3"> text text </li>
</ul>
<script>
jQuery(document).ready(function() {
    jQuery(".para").click(function() {
       // jQuery("#sclit").load(jQuery(this).attr('href')); // old code
        jQuery("#sclit").load(jQuery(this).attr('li'));
    });
});
</script>

我认为您只是想消除.load在这种情况下，您可以执行以下操作：

http://jsfiddle.net/GgMee/

将 html 标记更改为以下内容：

<div id="sclit"></div>
<a href="javascript:void(0)" class="para">Sci Lit 1</a>
<div class="details">text for sci lit 1</div>
<a href="javascript:void(0)" class="para">Sci Lit 2</a>
<div class="details">text for sci lit 2</div>
<a href="javascript:void(0)" class="para">Sci Lit 3</a>
<div class="details">text for sci lit 3</div>

每个链接后的detailsdiv 隐藏，其中包含单击该链接时要显示的文本。

那么jquery是这样的：

$(function(){
    $(".para").click(function(){
        $("#sclit").text($(this).next(".details").text()); 
    });
});

单击链接，在其后面找到detailsdiv，并将其中的文本放入sclitdiv 中。

我不确定我是否正确理解了您的问题，但如果我没有错，要求是

  1. 用户点击 li 标记
  2. div从 li 标签中获取文本。

如果这是正确的，那么这应该这样做

<div id="sclit"></div>
<!-- old code
<a href="page1.html" class="para">Sci Lit 1</a>
<a href="page2.html" class="para">Sci Lit 2</a>
<a href="page3.html" class="para">Sci Lit 3</a>
-->
<ul style="display:none">
<li class="page1"> text text </li>
<li class="page2"> text text </li>
<li class="page3"> text text </li>
</ul>
<script>
jQuery(document).ready(function() {
    jQuery("li").click(function() {
       // jQuery("#sclit").load(jQuery(this).attr('href')); // old code
        jQuery("#sclit").html(jQuery(this).text());
    });
});
</script>

jQuery(function() {
    // preload all li's with the content of each anchors href beforehand
    jQuery(".para").each(function(e) {
        var $li = $("<li />").load($(this).attr('href'));
        $("ul").append($li);
    });
    // now that data is already present in the li's (and if the indexes match up
    // which they should if your html is accurate) swap the divs html with 
    // the content of the corresponding li
    jQuery(".para").click(function(e) {
        e.preventDefault();
        jQuery("#sclit").html($("ul li:eq(" + $(this).index() + ")"));
    });
});
相关文章：