如何通过该div之外的li元素引用div答案

【问题标题】：How to refer to div by li element outside that div如何通过该div之外的li元素引用div
【发布时间】：2013-02-16 18:59:57
【问题描述】：

一开始我不得不承认我的编程知识非常基础。我不明白一切，所以也许我的问题看起来有点蹩脚，但我的想法仍然用完了，我需要问。

我使用了一个幻灯片元素教程，并在我的网站上添加了一些滑动 Div，一切正常，但在本教程中，作者在父 div 中使用了一个按钮元素，并点击了内部 div 幻灯片。我想使用导航部分中的 li 元素，该元素位于该 div 之外，但我不知道如何更改脚本代码以将动画保留在该 div 中。基本上看起来：

HTML：

    <ul id="navigation">
 <li class="about"><a title="A" href="#" > </a></li>
 <li class="search"><a title="P" href="#" ></a></li>
 <li class="photos"><a title="G" href="#" ></a></li>
 <li class="rssfeed"><a title="U" href="#" ></a></li>
 <li class="contact"><a title="K" href="#" ></a></li>
</ul>

    <div id="IDcontent" class="slide" >
<button>slide it</button>
<div class="inner"  style="margin-left: 100%"> test </div>
</div>

我设法更改脚本代码，即 li 元素触发单击操作而不是按钮，但单击后，它不会滑动 div，但会滑动下一个 li 元素。

脚本代码：

<script>

$(document).ready(function() {
  $('#navigation li').click(function() {
    var $marginLefty = $(this).next();
    $marginLefty.animate({
      marginLeft: parseInt($marginLefty.css('marginLeft'),10) == 0 ?
        $marginLefty.outerWidth() :
        0
    });
  });
});

  </script>

有什么建议吗？

非常感谢！

【问题讨论】：

您将遇到的问题是您单击的 LI 与您正在滑动的 DIV 堆栈无关。请为滑块 div 显示更多 HTML

标签： jquery html refer

【解决方案1】：

因为这行代码，

var $marginLefty = $(this).next();

点击后的下一个 li 元素是动画的，因为您稍后会执行 $marginLefty.animate()。如果要为 div 设置动画，则应将 marginLefty 设置为 div 元素。所以将该行替换为：

var $marginLefty = $('.inner');

要找出点击了哪个li，你可以这样做

// $(this) refers to the element that was clicked
$liClass = $(this).attr("class")

在点击处理程序中。然后，您可以根据单击的 li 更改 div 的内容，并使用 html() 函数。例如，

var content;
if($liClass == 'about'){
 content = 'about clicked';
}
else if($liClass == 'search'){
    content = 'search clicked';
}
//more code here
//more code here
$marginLefty.html(content);

您可以在此处找到有关 .attr() 和 .html() 的更多信息： http://api.jquery.com/attr/ 和 http://api.jquery.com/html/

【讨论】：

非常感谢，我确信问题出在那一行，但不知道如何解决 :) 但是你的答案仍然存在一个小错误。该 Var 不应指向 #IDcontent var $marginLefty = $('#IDcontent');在这种情况下，当我将它定义为 .inner 类对象时它会起作用。感谢您的回答，我已经设法解决了。
我可以多用一点你的善意，问你我想申请的修改吗？我有 2 个主题：1）滑动动画现在像开/关按钮一样工作，1 单击 div 滑入，第二次单击 div 滑出，我想更改它，当我单击下一个 li 元素时，当前 div 是自动的滑出并滑入新内容。 2）该内容是第二部分。您能给我一些提示或点一些教程吗？如何通过单击指定 li 元素来更改该 Div 内容。我应该创建 diferetn Div 并只显示我需要的那个吗？非常感谢！:)
当然，请参阅我的答案的编辑。将来，当您的问题有其他部分时，您可以将其作为另一个问题提出。
哦，我刚看到你评论的最后一部分。创建不同的 div 并显示您需要的也可以。 api.jquery.com/hide api.jquery.com/show 但是，如果你必须制作超过 2 或 3 个 div，你最好只使用 html() 函数
再次感谢，您的回答对我很有启发 ;) 特别是 If/else 对我有帮助……我是一名老派网页设计师 .. 使用旧技术 .. 但在那几天之后，我开始挖掘通过所有这些代码和语法，我发现了全新的世界.. 它是无限的！ :D

【解决方案2】：

试试这个：

   $(document).ready(function() {
      $('#navigation li').click(function() {
        var $marginLefty = $('a', this);
        $marginLefty.animate({
          marginLeft: parseInt($marginLefty.css('marginLeft'),10) == 0 ?
            $marginLefty.outerWidth() :
            0
        });
      });
    });

【讨论】：

【解决方案3】：

如果我理解正确，您是否希望 LI 元素执行与按钮元素相同的操作？您只需点击按钮即可：

$(document).ready(function() {
  $('#navigation li').click(function() {
      $('#IDcontent').find('button').trigger('click');
  });
});

您的按钮元素需要保留在页面上。这基本上将运行附加到按钮的单击事件的任何代码 - 每当您单击任何 LI 元素时。您可以通过更改选择器将其设置为仅对 1 个列表元素起作用：

  $('#navigation li.about').click(function() {
   ...
  });

这只会将此功能附加到 li class="about" 元素。

如果您打算将按钮留在页面上，则此方法有效。您可以简单地将按钮隐藏在 CSS 中，但这有点草率。如果您决定完全删除该按钮，只需找到该按钮正在使用的 Javascript 代码。它看起来像这样：

$('#IDcontent button').click(function(){ ... });

或类似的东西。然后只需将按钮点击事件中的代码移动到列表元素的点击事件中。

【讨论】：