Jquery 单击时显示特定的缩略图内容

我面临一个问题，每次我点击一个缩略图，它会显示我的内容，但在这种情况下，它会显示我的两倍，或在我原来的项目6倍。我设法使项目标题能够正常工作，但我很难显示.project[x]中的项目描述并只显示一次，现在它给了我一个微调器和项目标题两次（或原始版本中的6次）。虽然我发现问题在我的工作总结部分，但我还不能确定或修复这个问题

在把html标记和JS弄得一团糟之后，我最终得出了这个结论，我相信这更接近我的解决方案。现在，它只显示一个名称（每个缩略图正确），每个缩略图显示所有类（微调器/project1/project2）

单击第一个缩略图时的示例：

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标记：

函数工作负载（）{

$.ajaxSetup（{cache:false}）；
$（'.thumb overlay'）。单击（函数（）{
变量$this=$（this），
newTitle=$this.find（'strong'）.text（），
newClass=$this.data（'class'），
微调器='Loading…'，
新作品=“”+newClass+“”；
$（'.project load'）.html（微调器）.load（新工作）；
$（'项目名称'）。文本（新标题）；
});

---

}

您的HTML包含两个带有

class=“project load”

的div。取下你不想要的

---

jQuery正在更改它所能找到的每一个$（'.project load'）。

您的HTML包含两个带有

class=“project load”

的div。取下你不想要的

---

jQuery正在更改它能找到的每一个$（'.project load'）。

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

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

---

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

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

---

是的，我现在看到了这个错误，但在删除并只留下一个项目负载类之后，我又遇到了同样的情况，只是略有不同。将project load类保留在第一个work container div中，会给我第一个project div作为微调器，下一个project类显示work wrap类中第二个缩略图的内容。能否更新问题中的代码以匹配您所更改的内容？我更新了代码并附加了一个图像，以便更好地理解我的问题描述现在我看到两个问题。精确的缩略图内容无法通过微调器阶段，第二个问题是，它显示所有工作容器，而在理想情况下，它应该只显示1个。要添加更多内容：每个缩略图执行相同的操作，第一个工作容器显示为微调器类，第二个类显示为project2。为了更清楚，无论我按下哪个缩略图，我都会得到与共享图像中相同的结果。是的，我现在看到了这个错误，但在删除并只留下一个项目加载类后，我再次遇到相同的情况，只是略有不同。将project load类保留在第一个work container div中，会给我第一个project div作为微调器，下一个project类显示work wrap类中第二个缩略图的内容。能否更新问题中的代码以匹配您所更改的内容？我更新了代码并附加了一个图像，以便更好地理解我的问题描述现在我看到两个问题。精确的缩略图内容无法通过微调器阶段，第二个问题是，它显示所有工作容器，而在理想情况下，它应该只显示1个。要添加更多内容：每个缩略图执行相同的操作，第一个工作容器显示为微调器类，第二个类显示为project2。为了更清晰，无论我按下什么缩略图，我都会得到与共享图像相同的结果。

 <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>

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);

});
}