jquery - 我怎样才能得到 "view more"div 标签链接到不同的链接一个 Jquery 调出菜单链接

Question

http://jsfiddle.net/xDaL8/6/是它举行的地方。我有四个 div，右边的一个位置是菜单链接，左边的 3 个 div 从上到下依次是图像、内容和 View 。 “查看更多”需要与悬停在右侧链接上的任何一个链接相同，因为一旦点离开链接，左侧内容将保持事件状态，因此该特定链接的更多 View 需要与该特定链接具有相同的链接地址右边的链接。希望那不是那么令人困惑。

`$(文档).ready(函数() {

    var defaultText  = '.description';
    $("#MenuBar1 li").mouseover(function() {
        $("#back").attr("src", $(this).data("img"));
        defaultText = $(".description").html();
        $(".description").html($(this).data("description"));
    }).mouseout(function() {
        $("#back").attr("src", $("#back").data("original"));
        $(".description").html(defaultText);
});​   <div>
<div style="width: 377px; position:relative; left: 395px;">
    <ul id="MenuBar1" class="MenuBarHorizontal">
        <div style="height:20px;">
            <li id="button1" data-img="http://http://demo/images/anne.jpg" width="357" height="241" border="0" data-description="Demo Images Description">
                <a href="#">Anywhere</a>
            </li>
        </div>
        <div style="height:20px;">
            <li id="button2" data-img="http://demo/images/Banner.jpg"  data-description="Banner Description" >
                <a href="#">ware</a>
            </li>
        </div>
        <div style="height:20px;">
            <li id="button3" data-img="http://demo/images/Banner.jpg"  data-description="Demand Description" >
                <a href="#">Demand</a>
            </li>
        </div>
        <div style="height:20px;">
            <li id="button4" data-img="http:http://demo/images/Bans.jpg"  data-description="CMO Description" >
                <a href="#">CM</a>
            </li>
        </div>
        <div style="height:20px;">
            <li id="button5" data-img="http://demo/images/eat.jpg"  data-description="Key Description" >
                <a href="#">Key</a>
            </li>
        </div>

    </ul>
</div>
<div style="width: 357px; position: relative; top: -380px;" id="content"> 
    <img id="back"src="http://demo/images/Banner.jpg"data-original="http://demo/images/Banner.jpg" alt="e.s.t" /> 
</div>

将每次悬停的文本内容放在这里 `

Answer 1

查看 the updated fiddle .

假设我理解您想正确执行的操作，这是更新后的代码:

更新的 HTML:

<div>
  <div style="width: 377px; position:relative; left: 395px;">
    <ul id="MenuBar1" class="MenuBarHorizontal">
      <div style="height:20px;">
        <li id="button1" data-img="http://http://demo/images/anne.jpg" width="357" height="241" border="0" data-description="Demo Images Description" data-link="http://www.google.com">
          <a href="#">Anywhere</a>
        </li>
      </div>
      <div style="height:20px;">
        <li id="button2" data-img="http://demo/images/Banner.jpg"  data-description="Banner Description" data-link="http://www.yahoo.com">
          <a href="#">ware</a>
        </li>
      </div>
      <div style="height:20px;">
        <li id="button5" data-img="http://demo/images/eat.jpg"  data-description="Key Description" data-link="http://www.bing.com">
          <a href="#">Key</a>
        </li>
      </div>
    </ul>
  </div>
  <div style="width: 357px; position: relative; top: -380px;" id="content"> 
    <img id="back"src="http://demo/images/Banner.jpg"data-original="http://demo/images/Banner.jpg" alt="e.s.t" /> 
  </div>
  <div class="description" id="Text">put text content here for each hover</div>  
  <div> 
    <a href="#" id="view_more_link" style="color: #000">View More&gt;&gt;</a> </div>
  </div>​
</div>

更新后的 javascript:

$(document).ready(function() {

    var defaultText = $(".description").html();
    $("#MenuBar1 li").mouseover(function() {
        $("#back").attr("src", $(this).data("img"));
        defaultText = $(".description").html();
        $(".description").html($(this).data("description"));
        $('#view_more_link').prop('href', $(this).data("link"));
    }).mouseout(function() {
        $("#back").attr("src", $("#back").data("original"));
        $(".description").html(defaultText);
    });

});
​

您在正确的轨道上将描述放在列表项的数据属性中。我只是通过向列表项添加 data-link 属性，然后将该属性绑定(bind)到“查看更多”链接的 href 属性来做同样的事情。