在 HTML 文档中单击 class 后查找 class

Question

我的 HTML 中有以下内容：

             <div class="item" id="item_1">
                  Content
            </div>
             <div class="item" id="item_2">
                  Content
            </div>
             <div class="item" id="item_3">
                  Content
            </div>
              <!--CONTENT BLOCK 1-->  
             <div class="item w100" id="content_1">
                   Story
            </div>
             <!--/CONTENT BLOCK 1--> 

              <div class="item" id="item_4">
                  Content
            </div>
             <div class="item" id="item_5">
                  Content
            </div>
               <!--CONTENT BLOCK 2-->  
             <div class="item w100" id="content_2">
                   Story
            </div>
             <!--/CONTENT BLOCK 2--> 

             <div class="item" id="item_6">
                  Content
            </div>
               <!--CONTENT BLOCK 3-->  
             <div class="item w100" id="content_3">
                   Story
            </div>
             <!--/CONTENT BLOCK 3-->

内容块是隐藏的，只有在单击某个项目时才可见。作为一个无响应的布局，我可以很好地工作，但现在我已经使网站响应，并且 javascript 需要稍微不同的功能，因为每个项目宽度不同（它是一个盒装网格布局）。

这是javascript:

        // Open Link in Content Block
        jQuery(document).ready(function($){
            $('.contentLink').click(function(event){

                var itemID=$(event.target).closest(".storyLink").attr("id");
                showBlock(itemID);
                 document.location.hash = itemID; 
                   return false;

            }); 
        });         
        function showBlock(targetID){  //load content and open dialog
             var $url = "ss_storyboard/"+targetID+".html";

            if (targetID == 'Sarah')
                {
                    loadStory("#content_1", 500, targetID);  
                }
            else if ((targetID == 'item_1') || (targetID == 'item_2') || (targetID == 'item_3'))
                {
                    loadStory("#content_2", 1700, targetID);  
                }
            else if (targetID == 'item_4'  || targetID == 'item_5')
                {
                    loadStory("#content_3", 2200, targetID);        
                }
            else if (targetID == 'item_6' || targetID == 'item_7')
                {
                    loadStory("#content_4", 2750, targetID);   
                }
            else{
                  return false;
            }

我在想我可以做这样的事情:

            jQuery(document).ready(function($){
                $('.contentLink').click(function(event){    
                    var itemID=$(event.target).closest(".storyLink").attr("id");
                    var contentID= $(event.target).next(".w100").attr("id");
                    showBlock(itemID, contentID);
                     document.location.hash = itemID; 
                       return false;
                }); 
            });

但是 jquery 的 .next() 仅在内容集中有效。有没有办法找到在文档中单击 class 后出现的下一个 class？

另一种我可以做到这一点的方法是检测项目的换行符在哪里结束（即当项目换行时），并在此之后动态附加内容块....我只是不确定如何计算中断的位置。对于匹配不同屏幕宽度的多个媒体查询，所有项目宽度都使用不同的百分比。

Answer 1

最终答案

测量可用面积

function measureWidths(){
  var container = document.getElementById("container"),
      containerRectObject = container.getBoundingClientRect(),
      containerRight = 0;  

    containerRight = containerRectObject.right;

  return containerRight;
}

搜索每个故事链接和某些数据属性（如果它是行的最后一个）。这使用了先前函数中的 containerRight -value。

  $(".storylink").each(function(key, value) {

    $(this).append("<h2>Storylink no: " + key + "</h2>");
    $(this).attr("data-open", "false");
    $(this).attr("data-target", "content-" + key).append("<em>My data-target is 'content-" + key + "'</em>");
    storyLinkRectObject = this.getBoundingClientRect();
    storyLinkRight = storyLinkRectObject.right;

    if(storyLinkRight == containerRight){
      $(this).attr("data-row",dataRow);
      $(this).attr("data-endOfRow",dataRow);
      dataRow++;
    }else{
      $(this).attr("data-row",dataRow);
    }

  });

单击时，将 contentBlock 动态移动到行中最后一个故事链接之后。

//Destroy previous content of dynamicContentBlock
$(".dynamicContentBlock").html("");
$(".dynamicContentBlock").append(storyContent);
console.log(currentRow);
$(".dynamicContentBlock").insertAfter($("*[data-endOfRow='"+currentRow+"']"));
$(".dynamicContentBlock").show("slow");

检查整个代码HERE

~~我根据您的评论改进了我的答案。现在代码检查 window 宽度是否很小，如果它很小（移动），它会执行以下操作。~~

切换已点击 .storyLink 变大（可选）

根据分配的数据属性（新）得到通缉.storyBlock

使用insertAfter()-jQuery方法移动选中的.storyBlock-节点单击后 .storyLink（新）

显示想要的内容（您的代码）

注意事项：

我在 .storyLink、.storyblock 上添加了一些自定义数据属性和 .story 个元素。（仅限第一组链接）

我为每个 .storyLink 添加了 .story 只是为了让我自己更清楚。故事现在根据 class "open".
显示

CodePen You can find code here

旧答案

~~如果我没理解错，那么这可能会对你有所帮助。~~

分配数据目标（或类似目标），您可以轻松检测点击时显示的内容块。

我使用了.toggle()-jQuery方法，但是如果你不想在第二次点击时隐藏内容块，那么你可以使用.show()代替。

希望对您有所帮助！

~~CodePen~~

在 HTML 文档中单击 class 后查找 class

Find the class after a clicked class in a HTML document

javascript

jquery

responsive