Question

我几乎得到了我所追求的东西，但我现在正在努力解决jquery中的选择关系，以使最后的部分工作。我有一个JSFiddle，我已经习惯了这个阶段并展示了我想要实现的目标。

如果愿意，我可以添加HTML＆amp; CSS在这里，但认为将它们放在JSFiddle中更容易

这是jQuery正在处理下面提到的第一篇文章......

$(document).ready(function() {
    $(".more").click(function() {
        $(this).siblings(".long").fadeIn(2000, "linear");
        $(this).siblings(".short").hide();
        $(this).hide();
        $(this).siblings(".less").show();
    });
    $(".less").click(function() {
        $(this).siblings(".short").fadeIn(2000, "linear");
        $(this).siblings(".long").hide();
        $(this).hide();
        $(this).siblings(".more").show();
    });
});

为了解释，检索数据并且可以返回任意数量的记录，其中一些记录具有图像。在每种情况下，选择“更多...”链接应显示较长的文本，然后应显示“减少...”链接。

在JSFiddle的第一篇文章中，它几乎正常工作，但我希望将'Less ...'链接附加到长文本的末尾，就像'More ...'链接一样简短的文字。这适用于jQuery脚本，但正如您将看到'Less ...'链接在错误的位置。

在JSFIddle的第二篇文章中，我试图纠正它，但这是我正在努力的地方，因为我无法得到关系以使选择工作得到'Less ...'链接显示。< / p>

在第三篇文章中，没有图像，在这种情况下，显示“长”文本数据时会使用可用空间的全宽。我也有同样的问题。

Answer 1

一个简单的选项是将.less作为主要文字.long的一部分包含在内，然后无需隐藏/显示主文本。

您可以通过添加以下内容快速完成此操作：

.long .less { display: inline !important }

然后较少出现在第二个文本的正确位置。

当然，您需要更改.less点击代码...

更好的选择是不使用.siblings，因为这会过多地限制你的html布局（对布局的任何细微更改都会破坏你的脚本，正如你所发现的那样）。

虽然不完全独立于html，但您可以将向上转到父容器（“.startArchive”），然后向下转到相关代码，例如：

$(".more").click(function() {
    $(this).closest(".startArchive").find(".long").fadeIn(2000, "linear");
    $(this).closest(".startArchive").find(".short").hide();
    $(this).hide();
    $(this).closest(".startArchive").find(".less").show();
});

Answer 2

您所做的工作，只需确保您的标记符合您的选择关系。

你的较少div不是下篇文章中的兄弟，它是长篇文章的孩子。

将其移动为兄弟姐妹并且有效。

https://jsfiddle.net/umcbs7oj/1/

<span class="short"></span>
<span class="more">More...</span>
<div class="long wideText"></div>
<div class="less">Less...</div> <!-- This must be a sibling -->

Answer 3

试试这个.. 无需额外的标签包含＆＃34; Less ...＆＃34;文本。只需更改标签包含＆＃34;更多...＆＃34;并在jquery中检查该标记的Text。在JQuery中

＆＃13;

$(document).ready(function() {
                $(".more").click(function(){
                    if($(this).html().toLowerCase().indexOf("more") >= 0){
                    $(this).siblings(".long").fadeIn(2000, "linear");
                    $(this).siblings(".short").hide();
                    $(this).html("Less...");
                    }
                    else{
                        $(this).siblings(".short").fadeIn(2000, "linear");
                        $(this).siblings(".long").hide();
                        $(this).html("More...");
                    }
                });
            });

＆＃13;

 body {
    font: 10pt Arial, Helvetica, sans-serif;
}

.headerArchive {
    color: #1a486f;
    font-size: 1.1em;
    font-weight: bold;
    float: left;
}

.startArchive {
    clear: both;
}

.eventDateArchive {
    color: #1a486f;
    font-weight: normal;
    font-style: italic;
    padding-bottom: 3px;
    font-size: 1.1em;
}

.less,
.long {
    display: none;
}

.more,
.less {
    background: lightblue;
    font-size: 13px;
    padding: 1px;
    width: 50px;
    cursor: pointer;
}

.narrowText {
    width: 500px;
    padding-right: 5px;
}
.wideText {
    width: 720px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<div class="startArchive">
    <div>
        <span class="headerArchive">1st article heading</span>
        <span class="eventDateArchive">&nbsp;-&nbsp;20 Oct 2011</span>
    </div>
    <div style="clear:both;">
        <span class="short">1st short title. Congratulations to all the members bla bla</span>
        
        <div class="long">
            <div style="float:left;" class="narrowText">1st full title. Congratulations to all the members involved in this write up, especially to Fred Bloggs who did a major part in getting it into print. <a target="_blank" href="#">here</a>.
            </div>
            <div>
                <a class="hover" href="" target="_blank"><img src="https://lh3.googleusercontent.com/-CNKqDrKxtQQ/VlstSBNlj5I/AAAAAAAAB3o/GGosdy1HJ60/s144-Ic42/PCAS%252520front%252520cover.jpg" /></a>
            </div>
        </div>
        <span class="more">More...</span>
    </div>
</div>

<div class="startArchive">
    <div>
        <span class="headerArchive">2nd article heading</span>
        <span class="eventDateArchive">&nbsp;-&nbsp;20 Oct 2011</span>
    </div>
    <div style="clear:both;">
        <span class="short">2nd short title. Congratulations to all the members bla bla</span>
        
        <div class="long text">
            <div style="float:left;" class="narrowText">2nd full title. Congratulations to all the members involved in this write up, especially to Fred Bloggs who did a major part in getting it into print. <a target="_blank" href="#">here</a>.
            </div>
        </div>
        <div class="long">
            <a class="hover" href="" target="_blank"><img src="https://lh3.googleusercontent.com/-CNKqDrKxtQQ/VlstSBNlj5I/AAAAAAAAB3o/GGosdy1HJ60/s144-Ic42/PCAS%252520front%252520cover.jpg" /></a>
        </div>
        <span class="more">More...</span>
    </div>

</div>
<div class="startArchive">
    <div>
        <span class="headerArchive">3rd article heading</span>
        <span class="eventDateArchive">&nbsp;-&nbsp;20 Oct 2011</span>
    </div>
    <div style="clear:both;">
        <span class="short">3rd short title. Congratulations to all the members bla bla</span>
        <div class="long wideText">
            3rd full text. Congratulations to all the members involved in this write up, especially to Fred Bloggs who did a major part in getting it into print. <a target="_blank" href="#">here</a>.
        </div>
        <span class="more">More...</span>
    </div>
</div>

＆＃13;

试图解决jquery中的选择关系

3 个答案: