CSS + jQuery - 无法执行.toggle()和重复的jQueryTemplate项[我必须警告你这有点压倒性]

Question

好的,我们走了:

Stream.html(模板文件)

<div class="streamItem clearfix">
    <input type="button" />

    <div class="clientStrip">
        <img src="" alt="${Sender}" />
    </div>
    <div class="clientView">
        <a href="#" class="clientName">${Sender}</a>
        <p>${Value}</p> 
        <p>${DateTime}</p>  

        <div class="itemGadgets">
            <ul>
                <li class="toggleInput">Value</li>
                <li></li>
            </ul>
        </div>
        <div class="inputContainer">
            <input type="text" value="" />
        </div>
    </div>
</div>

<div class="spacer" />

Default.aspx(jQuery)

$('.toggleInput').live('click', function () {
    $(this).parent().parent()
        .find('.inputContainer').toggle();

    $(this).parent().parent().find('.inputContainer')
        .find('input[type=text]').focus();
});

更新:以上内容已更改为:

        $('.toggleInput').live('click', function () {
            $(this).closest(".clientView").find(".inputContainer").toggle()
            $(this).closest(".clientView").find(".inputContainer")
            .find('input[type=text]').focus();
        });

jQuery的问题:

1. 我有各自的评论.streamItem.我以前的解决方案是使用ListView如下控件:

   <ItemTemplate>
       <asp:Panel ID="StreamItem" CssClass="StreamItem" runat="server">
       ...
       <!--  Insert another nested ListView control here to load the comments for the parent stream. -->
   

   正如您所看到的,这不是一个解决方案,因为我开始使用jQuery模板,我使用以下jQuery $.ajax方法获取数据:

   $.ajax({
       type: 'POST',
       url: 'Services.asmx/GetStream',
       data: "{}",
       contentType: 'application/json',
       success: function (Stream) {
           $.get('Templates/Stream.html', function (template) {
               $.tmpl(template, Stream.d).appendTo("#Stream");
           });
       }
   });
   

   如何在不使用旧ListView解决方案的情况下解决此问题,但在获取特定流的数据时,使用jQuery模板加载注释？我使用一个简单的WebMethod方法返回我的数据如下:

   [WebMethod]
   public List<Stream> GetStream()
   {
       List<Stream> Streams = Stream.GetRange(X, X, HttpContext.Current.User.Identity.Name);
       return Streams;
   }
   

2. 我正在寻找一种方法来处理.toggleInputclick事件.我需要检查if .Comments((注释容器<div>)的主容器)是否有子项(或多个.commentItem).如果是这样,那么我需要显示.inputContainer并隐藏所有其他.inputContainer divs的.Comments size() == 0如果它们是可见的.

请看下面的图片:

更新:下面的CSS问题已解决.(我有冲突)

#globalContainer div 
{
    float               : right;
    position            : relative;
    display             : inline-block; /* <-- Thank you Firebug. */
}

Default.aspx(部分CSS)

div.streamItem div.clientView
{
    float               : left;
    width               : 542px;
}
div.streamItem div.clientView p
{
    margin              : 5px 0 0 0;
    font-size           : 10pt; 
}
div.streamItem div.clientView
div.inputContainer 
{
    display             : none; /* Doesn't hide .inputContainer */
    padding             : 2px;
    background-color    : #f1f1f1;
}

CSS问题:

在页面加载时,display: none;无效.

而已!如果您正在阅读本文,我想感谢您的时间和想法!:)

Answer 1

你正在尝试访问错误位置的元素

在js中：

 $('.toggleInput').live('click', function () {
        $(this).parent().parent()
....

它是否没有 .inputContainer 子元素 - 没有什么可以切换

（.closest 也不起作用，因为 .inputContainer 不是 .toggleInput 的父级，而是其父级的兄弟）

jQuery 选择器将是 $(this).closest('.itemGadgets').next();

为 2.

在你的点击处理程序中

var $currentInputContainer =  $(this).closest(".clientView").find(".inputContainer");
....
$('.inputContainer').each(function(){
  var $this = $(this);

   $this.toggle( $('.commentItem', $this).length > 0 );

});

//but it is better always to show the inputContainer which link was clicked
$('.inputContainer').not($currentInputContainer).each(function(){./*toggle empty|not empty containers */..});
$currentInputContainer.show();