好的，我们开始:

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

默认.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. 我正在寻找一种方法来处理 .toggleInput点击事件。我需要检查 .Comments ((作为评论容器 <div> )的一个主容器)有 child (或多个 .commentItem )。如果是这样，那么我需要证明 .inputContainer并隐藏所有其他 .inputContainer divs与.评论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;没有影响。

就是这样!如果您正在阅读本文，我要感谢您的时间和想法! :)

最佳答案

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

在 js 中:

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

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

(.closest 也不起作用，因为 .inputContainer 不是 .toggleInput 的父级，而是它的父级兄弟)

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

在您的点击处理程序中

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

关于c# - CSS + jQuery - 无法执行 .toggle() 并重复 jQueryTemplate Item [我必须警告你这有点让人不知所措]，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8155570/