Question

我遇到了一个问题，每次点击缩略图时，它都会显示我的内容，但在这种情况下它会显示我的两倍，或者在原始项目中显示6次。我设法让项目标题阅读起作用，但我很难显示在.project [x]中的项目描述并只显示一次，现在它给了我一个微调器和项目标题2次（或原始版本的6）。我发现问题出在我的工作包装部分，但我无法识别或解决这个问题。

在搞砸了html标记和JS之后我最终得到了这个，我相信这更接近我的解决方案。现在它只显示1个名称（每个缩略图都正确），每个缩略图显示所有类（spinner / project1 / project2）

单击第一个缩略图时的示例：http://i.imgur.com/SiEuZtH.png

HTML标记：

    <div class="work-belt">
        <div class="thumb-wrap">
            <div class="thumb-container">
                <a href="#/" class="thumb-unit">
                    <div data-class="project1" class="thumb-overlay">
                        <strong>Name1</strong>
                    </div>
                </a>
                <a href="#/" class="thumb-unit">
                    <div data-class="project2" class="thumb-overlay">
                        <strong>Name2</strong>
                    </div>
                </a>
            </div>
        </div>

        <div class="work-wrap">
            <div class="work-container">
                <h4 class="project-title"></h4>
                <div class="project-load"></div>
                <div class="project1">
                    <div style="width: 600px; height: 500px; background: #aaa;"></div>
                    <p>1st description</p>
                </div>
                <div class="project2">
                    <div style="width: 600px; height: 500px; background: #000;"></div>
                    <p>2nd description</p>
                </div>
            </div>
        </div>

    </div> <!-- Ending of work-belt -->

JS标记：

function workLoad（）{

$.ajaxSetup({ cache: false });

$('.thumb-overlay').click(function() {

    var $this = $(this), 
            newTitle = $this.find('strong').text(),
            newClass = $this.data('class'),
            spinner = '<div class="loader">Loading...</div>',
            newWork = '<div class="project-load">'+ newClass +'</div>';
    $('.project-load').html(spinner).load(newWork);
    $('.project-title').text(newTitle);

});

}

Answer 1

您的HTML包含两个带有class = "project-load"的div。删除你不想要的任何东西。

jQuery正在改变它可以找到的每个$（＆＃39; .project-load＆＃39;）。

Answer 2

所以我得到了解决方案的答案。事实证明，我甚至不需要一个微调器（愚蠢的我），因为如果直接注入信息，你很明显不需要它。其次，我必须将所有项目div隐藏在我的SASS中，我在开始时跳过它，所以：

  SASS: 
    [class^='projectc']
      display: none

＆lt; - 在我的情况下注意我必须更改数据属性名称并重命名项目div，以便标题不受影响 - ＆gt;

 <a href="#/" id="1" class="thumb-unit">
   <div data-class="projectc1" class="thumb-overlay">
     <strong>Name1</strong>
  </div>
</a>
<a href="#/" id="2" class="thumb-unit">
  <div data-class="projectc2" class="thumb-overlay">
    <strong>Name2</strong>
  </div>
</a>

...

   <h4 class="project-title"></h4>
     <!— <div class="project-load"></div> — Remove -->
     <div class="projectc1">
       <div style="width: 600px; height: 500px; background: #aaa;"></div>
       <p>1st description</p>
     </div>

js：

function workLoad() {

  $.ajaxSetup({ cache: false });

  $('.thumb-overlay').click(function() {

    var $this = $(this), 
        newTitle = $this.find('strong').text(),
        newClass = $this.data('class');
     // $('.project-load').load(newClass);  -- Remove
     $("[class^='projectc']").css('display', 'none');
     $(newClass).css('display', 'block');
     $('.project-title').text(newTitle);

});
}

点击后显示特定的缩略图内容

2 个答案: