我正在尝试创建一系列资源框,这些资源框将作为图像和标题显示在页面上。
当选择(点击)图像(资源)时,将显示包含资源简要描述的下拉框,以及更多信息的按钮。
再次点击资源时,它将显示资源的完整描述,以及两个按钮:一个用于删除信息,另一个用于少信息。
我已经使用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) > 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);
重新调整'class added [object object]'
。
我认为这是因为HTML正在被对象的字符串表示填充?
答案 0 :(得分:1)
我认为最简单的方法是给'按钮'一个共享类和一个自定义id。然后使用jQuery读取所单击的buttonclass-item的自定义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可能更合适。
答案 1 :(得分:0)
如果你想检查你的元素是否有类,你可以使用jQuery的hasClass()
函数:
$('a').click(function () {
if( $(this).hasClass('yourClass') ) {
//Do whatever this class needs to do
else {
// Do other stuff...
有关hasClass函数的更多信息,请参见JQuery API Documentation
答案 2 :(得分:0)
你曾经尝试过 alert(“class added”+ $(briefInfo).attr(“class”));
如果你得到正确的警告,那么你可以通过这种方式使用你的逻辑。