Question

我有一段代码通过SOAP从SharePoint列表中提取所有列表项，然后以FAQ的形式将它们写入页面。由于此列表可能会很长，我想将它们写入页面，以便只显示问题，当您单击某个问题时，该问题的特定面板将只显示该面板。

我的代码全部工作，只有一件小件让我感到烦恼 -

<link rel="stylesheet" href="/sites/someSite/System%20Resources/FAQ2.css" type="text/css"/>
<script src="/sites/someSite/System%20Resources/jquery-1.8.2.min.js"></script>
<script type="text/javascript"> 
$(document).ready(function() {

$(".question").click(function(){
    $("#a"+$(this).attr("id")).slideToggle("slow");});

    var soapEnv =
        "<soapenv:Envelope xmlns:soapenv='http://schemas.xmlsoap.org/soap/envelope/'> \
            <soapenv:Body> \
                 <GetListItems xmlns='http://schemas.microsoft.com/sharepoint/soap/'> \
                    <listName>A Big Fat FAQ</listName> \
                    <viewFields> \
                        <ViewFields> \
                           <FieldRef Name='Question_x0020_Description' /> \
                           <FieldRef Name='Response'/> \
                           <fieldRef Name='ID'/>\
                       </ViewFields> \
                    </viewFields> \
                </GetListItems> \
            </soapenv:Body> \
        </soapenv:Envelope>";

    $.ajax({
        url: "/sites/someSite/_vti_bin/lists.asmx",
        type: "POST",
        dataType: "xml",
        data: soapEnv,
        complete: processResult,
        contentType: "text/xml; charset=\"utf-8\""
    });
});

function processResult(xData, status) {
    $(xData.responseXML).find("z\\:row").each(function() {
    var iDesc=$(this).attr("ows_Question_x0020_Description");
    var iResp=$(this).attr("ows_Response");
            var iID=$(this).attr("ows_ID");

            var liHtml = "<div class='question' id='"+iID+"'>" + iDesc + "</div><div class='answer' id='a"+iID+"'><a href='/sites/someSite/Lists/FAQ/DispForm.aspx? ID='"+iID+"'>"+ iResp +"</a></div>";
            alert(liHtml);
            $("#FAQ").append(liHtml);

    });


}
</script>


<h1>A Big Fat FAQ</h1>
<div id="FAQ"></div>

除了屏幕上问题的点击事件没有响应外，一切正常。

在发出警告以显示它输出的内容为liHtml变量之后，我发现它在iDesc变量周围插入了一组额外的标签，因此无需点击。

<div class='question'id='5'>
<div>Why is the sky blue?</div>
</div>

我认为这可能是问题所在。问题描述和响应列都设置为Rich Text，这导致备用标签。我把它们都改成了纯文本，它摆脱了剩余的div，我的问题和答案div都有正确的ID，但它仍然无效。这可能是那些微小的语法错误之一，但我在这里写了一个空白，关于还有什么可能是问题。

Answer 1

只需移动代码以切换“processResult”中的响应

function processResult(xData, status) {
    $(xData.responseXML).find("z\\:row").each(function() {
    var iDesc=$(this).attr("ows_Question_x0020_Description");
    var iResp=$(this).attr("ows_Response");
            var iID=$(this).attr("ows_ID");

            var liHtml = "<div class='question' id='"+iID+"'>" + iDesc + "</div><div class='answer' id='a"+iID+"'><a href='/sites/someSite/Lists/FAQ/DispForm.aspx? ID='"+iID+"'>"+ iResp +"</a></div>";
            alert(liHtml);
            $("#FAQ").append(liHtml);

    });

$(".question").click(function(){
    $("#a"+$(this).attr("id")).slideToggle("slow");}); 

}

使用Jquery动态显示/隐藏面板

1 个答案: