Question

我创建了一个带有地图div的HTML文档。地图显示了一些兴趣点。在地图的底部有一个条形图，其中包含相对于PoI的缩略图。每张图片都有id和class =“photoThumbnail”。除了地图之外，还有一个div，其中class = sidebar又包含两个元素。

第一个（class = general）始终可见，第二个（class = detail）设置为在加载时不可见。

当我点击图片栏中的图片时，地图会放大到相关的兴趣点。与此同时，我想在旁边的栏中显示相对于点击图片的内容。 HTML结构如下：

图片的HTML元素：

<img id="fountain1" class="photoThumbnail" src="../img/fountains/fountain1.jpg" alt="fountain1" style="cursor:pointer" title="Fountain1" hspace="5">
<img id="fountain2" class="photoThumbnail" src="../img/fountains/fountain2.jpg" alt="fountain2" style="cursor:pointer" title="Fountain2" hspace="5">

侧栏的HTML元素：

<div class="sidebar" id="fountainSideBar" role="complementary">
    <aside class="general">
        <h2>Fountains</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>          
    </aside>    
    <aside class="detail">
        <div id="fountain1-AS">
            <h2>Fountain1</h2>              
            <div class="caption">           
                <img id="fountain1-AS-img" class="asideImage" src="../img/fountains/fountain1.jpg" alt="fountain1" style="cursor:pointer" title="Fountain1" hspace="5">
            </div>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
        <div id="fountain2-AS">
            <h2>Fountain2</h2>              
            <div class="caption">           
                <img id="fountain2-AS-img" class="asideImage" src="../img/fountains/fountain2.jpg" alt="fountain2" style="cursor:pointer" title="Fountain2" hspace="5">
            </div>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
    </aside>
</div>

jQuery脚本如下：

$(".photoThumbnail").click(function(){
    var img_id = this.id;
    var aside_div_id = "#" + img_id + "-AS";
    $("aside").children("aside_div_id").show();
    return false;
});

它不起作用，没有显示任何内容。如果我只写

$("aside").show();

侧边栏显示了整个元素的内容（所有喷泉的描述），但是如果我添加.children（“aside_div_id”），我看不到所请求的内容（只有我点击的喷泉）。

Answer 1

使用此fiddle。这可能会有所帮助！

JS：

$(".photoThumbnail").click(function(){
    var img_id = $(this).attr('id');
    var aside_div_id = "#" + img_id + "-AS";
    $("aside").children('div[id^="fountain"]').hide();
    $("aside").children(aside_div_id).show();
    return false;
});

HTML：

<img id="fountain1" class="photoThumbnail" src="../img/fountains/fountain1.jpg" alt="fountain1" style="cursor:pointer" title="Fountain1" hspace="5">
<img id="fountain2" class="photoThumbnail" src="../img/fountains/fountain2.jpg" alt="fountain2" style="cursor:pointer" title="Fountain2" hspace="5">

<div class="sidebar" id="fountainSideBar" role="complementary">
    <aside class="general">
        <h2>Fountains</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>          
    </aside>    
    <aside class="detail">
        <div id="fountain1-AS">
            <h2>Fountain1</h2>              
            <div class="caption">           
                <img id="fountain1-AS-img" class="asideImage" src="../img/fountains/fountain1.jpg" alt="fountain1" style="cursor:pointer" title="Fountain1" hspace="5">
            </div>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
        <div id="fountain2-AS" style="display:none;">
            <h2>Fountain2</h2>              
            <div class="caption">           
                <img id="fountain2-AS-img" class="asideImage" src="../img/fountains/fountain2.jpg" alt="fountain2" style="cursor:pointer" title="Fountain2" hspace="5">
            </div>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
    </aside>
</div>

Answer 2

@Peter是对的，你不需要“aside_div_id”周围的引号：

jQuery(document).ready(function() {
  $(".photoThumbnail").click(function(){
      var img_id = this.id;
      console.log(this.id);
      var aside_div_id = "#" + img_id + "-AS";
      $("aside").children(aside_div_id).show();
      return false;
  });
});

https://en.wikipedia.org/wiki/Server_Name_Indication

Answer 3

你试图以错误的方式找到孩子。你可以使用find而不需要引号

检查此代码段

＆＃13;

$(document).ready(function() {
  $(".photoThumbnail").click(function() {
    var img_id = this.id;
    var aside_div_id = "#" + img_id + "-AS";

    var childDiv = $("aside.detail").find(aside_div_id);
    $(childDiv[0]).show().addClass('red');
  });

});

＆＃13;

.red {
  background: red;
}
.detail div {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="fountain1" class="photoThumbnail" src="../img/fountains/fountain1.jpg" alt="fountain1" style="cursor:pointer" title="Fountain1" hspace="5">
<img id="fountain2" class="photoThumbnail" src="../img/fountains/fountain2.jpg" alt="fountain2" style="cursor:pointer" title="Fountain2" hspace="5">

<div class="sidebar" id="fountainSideBar" role="complementary">
  <aside class="general">
    <h2>Fountains</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </aside>
  <aside class="detail">
    <div id="fountain1-AS">
      <h2>Fountain1</h2>
      <div class="caption">
        <img id="fountain1-AS-img" class="asideImage" src="../img/fountains/fountain1.jpg" alt="fountain1" style="cursor:pointer" title="Fountain1" hspace="5">
      </div>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div id="fountain2-AS">
      <h2>Fountain2</h2>
      <div class="caption">
        <img id="fountain2-AS-img" class="asideImage" src="../img/fountains/fountain2.jpg" alt="fountain2" style="cursor:pointer" title="Fountain2" hspace="5">
      </div>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
  </aside>
</div>

＆＃13;

希望有所帮助

显示嵌套div的内容

3 个答案: