jquery - 使用 jQuery 在 ID 具有类时显示内容

Question

我正在尝试创建一系列资源框，这些资源框将作为图像和标题显示在页面上。

选择图像(资源)(单击)时，将显示包含资源简要说明的下拉框，以及一个按钮以获取更多信息。

当再次点击该资源时，它将显示该资源的完整描述和两个按钮:一个用于删除信息，一个用于减少信息。

我使用 XSLT 根据用户输入资源时提供的 XML 选择每个资源的内容。

XSLT:

<div id="newContainer">
<div class="hidden">
<xsl:value-of select="/Properties/Data/Group[@Name='Header']/Datum[@Name='Title']"/>
</div>
    <ul id="initialContent">
        <xsl:for-each select="/Properties/Data/Group[@Name='List Item']">
            <li>
                <xsl:attribute name="class">
                    <xsl:value-of select="Datum[@Name='Title']"/>
                </xsl:attribute>
                <a href="#">                
                        <img>
                            <xsl:attribute name="src">
                                <xsl:value-of select="Datum[@Name='Source']"/>
                            </xsl:attribute>
                            <xsl:attribute name="alt">
                                <xsl:value-of select="Datum[@Name='Alt']"/>
                              </xsl:attribute>                      
                        </img>  
            <xsl:value-of select="Datum[@Name='Title']"/>   
                </a>
            </li>
        </xsl:for-each>
    </ul>
</div>
<div id="briefDescription">
<xsl:if test="@class=Datum[@Name='Title']">
     <xsl:for-each select="/properties/Data/Group[@Name='List Item']">
        <a>         
        <xsl:value-of select="Datum[@Name='Description']"/>
        <xsl:value-of select="normalize-space(substring(title,1,50))" disable-output-escaping="yes"/>
    <xsl:if test="string-length(title) &gt; 50">..</xsl:if>         
        </a>
    </xsl:for-each>
</xsl:if>
</div>

XML:

<Data>
<Datum Exposed="true" ID="ResourceTitle" Name="Title" Type="String">Title</Datum>
<Group Exposed="true" ID="Resource" Name="List Item" Replicatable="true">
<Datum Exposed="true" ID="ResourceName" Name="Name" Type="String">Resource Name</Datum>
<Datum Exposed="true" ID="ResourceSource" Name="Source" Type="File"><![CDATA[$URL_PREFIX/assets/sites/hea1/pages/hea-building.jpg]]></Datum>
<Datum Exposed="true" ID="ResourceLink" Name="Link" Type="File"><![CDATA[Http://www.bbc.co.uk]]></Datum>
<Datum Exposed="true" ID="ResourceAlt" Name="Alt" Type="String">Alt Text</Datum>
<Datum Exposed="true" ID="ResourceDescription" Name="Description" Type="Textarea">Introductory Text</Datum>
</Group>
</Data>

然后我使用 jQuery 使框向下滑动、向上滑动、隐藏等。

我在选择资源时确保XSLT格式化正确的资源信息很难。

我可以使用 jQuery 来识别一个类，然后使用 XSLT 根据 XML 节点检查该类吗？例如:

function getClassName() {

$('li').click(function(){
var chosenClass = $(this).attr('class');
alert(chosenClass);
});

}

<xsl:when test ="$chosenClass and Datum[@Name='Title']">

我已经为所选资源提供了一个唯一 ID，并使用 XSLT 设置了一个由 XML 节点名称 Name 提供的 var 类名。

以下 jQuery 是我目前所拥有的。在我尝试将类设置为 ID $('#briefDescription') 之前，它会做它应该做的事。

$(document).ready(function () {
getClassName();
displayContent();
infoMsgRemove();
removeInfo();
moreInfo();
});

var briefInfo = $('#briefDescription');
var moreInfo = $('#moreInfo');
var fullInfo = $('#fullDescription');
var newBriefInfo = newBriefInfo;

function getClassName() {

$('a').click(function () {
    var chosenClass = $(this).attr('class');
    var selectedClass = chosenClass;
    alert(selectedClass + ' chosen');

    briefInfo.addClass(chosenClass);
    var newBriefInfo = briefInfo.addClass(chosenClass);
    var createdBriefInfo = newBriefInfo;
    alert('class added'+ briefInfo.text());
});
}

function displayContent() {

$('#initialContent').click(function (e) {  

    if (newBriefInfo.is(':hidden')) {
        newBriefInfo.slideDown('fast');
        moreInfo.show('li');
    } else {
        fullInfo.slideDown('fast');
        moreInfo.hide('li');
    }
    e.preventDefault();
});
}

function moreInfo() {

$('#moreInfo').click(function () {
    if (fullInfo.is(':hidden')) {
        fullInfo.slideDown('fast');
        moreInfo.hide('li');
    }
});
}

function infoMsgRemove() {

$('#noInfo').click(function () {
    fullInfo.hide();
    briefInfo.hide();
    alert('msg hidden');
});
}

function removeInfo() {

$('#lessInfo').click(function () {
    fullInfo.slideUp('fast');
    moreInfo.show('li');
});
}

我have created a JSFiddle希望能在某种程度上展示我正在尝试做的事情。

在函数getClassName中发出警报；

alert('class added'+ briefInfo);

返回 '添加的类 [object object]'。

我认为这是因为 HTML 是由对象的字符串表示填充的？

Here is the work in progress fiddle .

Answer 1

我认为最简单的方法是为“按钮”提供共享类和自定义 ID。然后使用 jQuery 读取单击的按钮类项的自定义 ID，并在描述的类上使用命名策略以使其正确显示。

HTML:

<a href="#" class="myResources" id="resource_1">
    <h2>resource 1</h2>
</a>

和 Javascript/jQuery:

$(".myResources").click(function() {
//And use the same id as class of the description for easy targetting.
var resName = $(this).attr('id');
    $('.'+resName).show();
});

希望这就是我们正在寻找的东西。可能不是最干净的解决方案。 HTML5 custom data-attributes可能更合适。