Question

我正在使用jQuery Mobile 1.4.5版开发jQuery Mobile应用程序。我的应用程序可以允许用户成为许多不同广告系列的成员。我使用ColdFusion作为服务器端脚本语言，并使用jQuery和JavaScript作为客户端。

在我的index.cfm页面上，我有几个jQuery Mobile页面，它们是多页面模板的一部分。我的其中一个页面称为pageEntries：

<cfloop index="i" from="1" to="#ArrayLen(session.arrActiveUserCampaigns)#">
<cfoutput>
<cfif i GT 1>
    <div id="id#reReplace(session.arrActiveUserCampaigns[i][4], '[[:space:]]', '', 'ALL')#" style="visibility:hidden;"><h4>#session.arrActiveUserCampaigns[i][4]#</h4></div>
<cfelse>
    <div id="id#reReplace(session.arrActiveUserCampaigns[i][4], '[[:space:]]', '', 'ALL')#" style="visibility:visible;"><h4>#session.arrActiveUserCampaigns[i][4]#</h4></div>
</cfif>
</cfoutput>

我还有一个jQuery Mobile面板，位于屏幕右侧：

<div data=role="panel" id="entriesPanel" data-position="right" data-display="push">
<cfloop index="i" from="1" to="#ArrayLen(session.arrActiveUserCampaigns)#">
<cfif #i# EQ 1>
    <cfset campaignButton = "<button onclick='campaignButton(this.id)' id='btn#reReplace(session.arrActiveUserCampaigns[i][4], "[[:space:]]", "", "ALL")#' class='ui-btn ui-corner-all ui-icon-check ui-btn-icon-right ui-alt-icon'>#session.arrActiveUserCampaigns[i][4]#</button>" />
<cfelse>
    <cfset campaignButton = campaignButton & "<button onclick='campaignButton(this.id)' id='btn#reReplace(session.arrActiveUserCampaigns[i][4], "[[:space:]]", "", "ALL")#' class='ui-btn ui-corner-all'>#session.arrActiveUserCampaigns[i][4]#</button>" />
</cfif></cfloop><cfoutput>#campaignButton#</cfoutput></div>

在entriesPanel面板页面上，我希望能够单击一个按钮，以使该广告系列成为pageEntries数据角色页面内index.cfm页面上显示的那个。我已经尝试使用以下JavaScript代码来完成此操作，但是到目前为止，页面上的内容没有任何反应。我们的目标是更改这些div元素的样式属性，使所有这些元素都隐藏起来，除了那些应该可见的元素：

function campaignButton(campaignBtnID){
//event.stopPropogation();/* prevents bubbling of click event to Parent element*/
//event.stopImmediatePropogation();/* prevents bubbling of click event to Children elements*/
var parentID = document.getElementById(campaignBtnID).parentNode.id;
var childrenNodes = document.getElementById(parentID).children;
var childNodeLength = childrenNodes.length;
var btnWithCheck = "ui-btn ui-corner-all ui-icon-check ui-btn-icon-right ui-alt-icon";
var btnWithoutCheck = "ui-btn ui-corner-all";
var constructorName = "";
var pageCampaignID = "";
var arrPageCampaignID = [];
for(i=0; i < childNodeLength; i++){
    constructorName = childrenNodes[i].constructor.name.toString();
    if(constructorName == "HTMLButtonElement"){
        var childID = childrenNodes[i].id;
        pageCampaignID = childID.replace('btn', 'id');
        arrPageCampaignID.push(pageCampaignID);
        if(childID == campaignBtnID){
            if(document.getElementById(childID).className.match( /(?:^|\s)ui-btn ui-corner-all ui-icon-check ui-btn-icon-right ui-alt-icon(?!\S)/ ) != null){

                document.getElementById(childID).className = document.getElementById(childID).className.replace( /(?:^|\s)ui-btn ui-corner-all ui-icon-check ui-btn-icon-right ui-alt-icon(?!\S)/ , 'ui-btn ui-corner-all' );

            }
        } else {
            //constructorName's id value does not match campaignBtnID, update class to include
            //constant btnWithoutCheck value
            if(document.getElementById(childID).className.match( /(?:^|\s)ui-btn ui-corner-all(?!\S)/ ) != null ){
                document.getElementById(childID).className = document.getElementById(childID).className.replace( /(?:^|\s)ui-btn ui-corner-all(?!\S)/ , 'ui-btn ui-corner-all ui-icon-check ui-btn-icon-right ui-alt-icon' );
            }
        }
    }
    $( "#"+childID ).button("refresh");
}
var adjustedCampaignBtnID = campaignBtnID.replace('btn', 'id');
alert(adjustedCampaignBtnID);
//Loop through the array of pageCampaignID values in arrPageCampaignID
var myArrLength = arrPageCampaignID.length;
for(i=0; i<myArrLength; i++){
    if(adjustedCampaignBtnID == arrPageCampaignID[i]){
        document.getElementById(arrPageCampaignID[i]).style.visibility = "hidden";
    } else {
        document.getElementById(arrPageCampaignID[i]).style.visibility = "visible";
    }
}
}

返回entryPanel页面，第一个按钮小部件将始终与pageEntries页面上的第一个div元素相对应。我正在使用第一个按钮中的复选图标。

我想做的是以下事情：

1）当单击除带有复选图标的当前按钮以外的任何按钮时，我希望该按钮具有复选图标，并从最初具有复选图标的那个中删除复选图标。

2）在pageEntries页面上的div元素上更改样式，以使正确的样式现在可见，其余的样式被隐藏。

我的大部分逻辑工作正常。我当时可以在Web控制台中看到这些元素正在正确更新，但是所做的更改并未应用于页面本身。为了将这些更改写入页面，我该怎么做？

使用jQuery和多页jQuery移动页面更新页面内容

0 个答案: