台灣最大程式設計社群網站
線上人數
730
 
會員總數:245217
討論主題:189089
歡迎您免費加入會員
討論區列表 >> ASP.NET >> 透過 Literal 動態新增的li 如何加入 class?
[]  
[我要回覆]
回應主題 加入我的關注話題 檢舉此篇討論 將提問者加入個人黑名單
透過 Literal 動態新增的li 如何加入 class?
價值 : 50 QP  點閱數:391 回應數:16

樓主

冷逸雲
初學者
90 61
618 116
發送站內信

Aspx


Codebehind


搜尋相關Tags的文章: [ aspx.net ] , [ c# ] , [ li class ] , [ Literal 動態新增li ] ,
本篇文章發表於2019-08-27 17:13
別忘捐VP感謝幫助你的人 新手會員瞧一瞧
1樓
回應

topcat
捐贈 VP 給 topcat 檢舉此回應
runat="server"
是在aspx中設定
由IIS編譯時,會讓Code File中可以透過id取得控制

然而您的li是由Code File中產生
即使您加了runat="server"
他不會再次編譯
也就不會有作用

比較建議的方式是,您不妨
1.直接透過css設定
2.透過動態(CodeFile產生)或靜態(aspx中預先安排好)的jQuery來加Class

例如:
aspx:


CodeFile


本篇文章回覆於2019-08-28 11:11
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
2樓
回應

topcat
捐贈 VP 給 topcat 檢舉此回應
#1補充
myLi1的部分,是透過CSS的設定,直接套用
myLi2的部分,則是透過jQuery的addClass的方式,將『li2』加上去

兩種方式提供您參考

有不清楚的地方歡迎提出討論唷
^_^
本篇文章回覆於2019-08-28 11:52
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
3樓
作者回應

冷逸雲
檢舉此回應
謝謝版主回覆

不過坦白說有點看不懂^^
本篇文章回覆於2019-08-28 18:04
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
4樓
回應

topcat
捐贈 VP 給 topcat 檢舉此回應
其實不論是方法一或二
都是跟CSS的Select Filter有關
這裡用到的是{屬性}篩選器

而我用的方式,是自訂屬性

將這兩個方式結合,就是我的方法

您可以觀察一下我的CodeFile
每個li我都安排了自訂屬性
前五個我安排了myAttr='myLi1'
後五個則是myAttr='myLi2'

而CSS與jQuery的屬性篩選器
就是用中括號[]

您可以先觀察這個style中的
li[myAttr='myLi1']

他就是畫面中的li,有屬性"myAttr"且值為"myLi1"
符合以上條件的所有li,也就是前面五個動態產生的li

有機會的話,可以把CSS的selector學一下
他與jQuery的Selector概念是通的
學一個可以用在CSS與jQuery
還蠻值得花時間投入學習~

^_^
本篇文章回覆於2019-08-28 20:44
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
5樓
作者回應

冷逸雲
檢舉此回應
感謝版主的回覆

小弟試了一下您的兩種方法

方法一不適用:
因為小弟要加入的樣式是要告訴User按了哪一個<li>

方法二不可用:
因為小弟的<li></li>裡包了一個<a href="#" onclick></a>
onclic以後就postback了
既使在後端再回傳值給某個HiddenField.Value
如下
var id = document.getElementById("FormView1_getid").value;
$('li[myAttr=""+id+""]').addClass('active')
也沒效果
本篇文章回覆於2019-08-28 23:10
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
6樓
回應

topcat
捐贈 VP 給 topcat 檢舉此回應

方法一不適用:
因為小弟要加入的樣式是要告訴User按了哪一個<li>

只要想辦法
讓『要讓使用者按的li』加上自訂屬性,其他的不要加,就成了


方法二不可用:
因為小弟的<li></li>裡包了一個<a href="#" onclick></a>
onclic以後就postback了
既使在後端再回傳值給某個HiddenField.Value
如下
var id = document.getElementById("FormView1_getid").value;
$('li[myAttr=""+id+""]').addClass('active')
也沒效果


小喵比較懷疑是否Script有狀況,或者沒有如您預期的資料(例如:id的內容與您預期不同,或者html的內容與您預期不同)

幾個狀況
首先
PostBack後,沒有必要透過HiddenField,然後再透過Client取值
也可以直接在CodeFile產生好jQuery的程式片段

其次
Client端的Script如果作用沒預期
建議您可以透過瀏覽器的兩個東西來幫您找問題
『檢視原始碼』『開發者工具(通常是F12)』

透過『檢視原始碼』,可以查看產出的html內容,是否如預期
而『開發者工具』的『Console』則會在Script運作中有問題的部分,特別顯示出來
也可以搭配console.log(你要在Console偵錯的內容)
把特定的值顯示在Console,來看看關鍵的值是否如預期

因為您要做的事情,從您的描述您小喵我不是很清楚明白
所以能給的,就是方向,以及可以自己偵錯的方式

您再試試看
加油
有問題隨時討論
^_^


本篇文章回覆於2019-08-29 09:31
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
7樓
回應

topcat
捐贈 VP 給 topcat 檢舉此回應
其實,小喵一值不清楚您想要做的效果是什麼
直到看到

因為小弟要加入的樣式是要告訴User按了哪一個<li>



因為小弟的<li></li>裡包了一個<a href="#" onclick></a>
onclic以後就postback了
既使在後端再回傳值給某個HiddenField.Value


小喵才有點線索,可以猜測您想做到的效果
但還是猜測∼
如果您能夠清楚描述想做的效果
我才能夠給您相對合適的解法

好了,以下是小喵的猜測,

您需要依據資料,動態的產生Li
而每個Li裡面,需要有個超連結可以PostBack,(這不就是LinkButton)

需要的是,使用者按了LinkButton後,他所屬的li要加上 active,好讓Li有明顯的不同,讓使用者知道按了哪一個

不知道猜的對,還是不對
^.^a

本篇文章回覆於2019-08-29 09:52
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
8樓
最有價值解答

topcat
捐贈 VP 給 topcat 檢舉此回應
假設您的需求如小喵所猜測的

您使用的方式是『在CodeFile依據資料動態產生內容』
『在CodeFile依據資料動態產生內容』這種,是小喵能避免就避免的方式
因為有太多的魔鬼細節在這裡面
做得出來也不好理解、不好維護

小喵會用DataSource搭配ListView或者Repeter或者其他的方式來替代

小喵用DataSource他配ListView做個範例
資料以北風的Shippers這個資料表為例子

aspx:



CodeFile:


相同一筆資料
可以透過NamingContainer.FindControl找到相同一筆資料的不同控制項
搭配li自訂屬性,動態產生jQuery的內容
用的就是#2的方法二的方式

您參考看看

^_^
本篇文章回覆於2019-08-29 11:26
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
9樓
作者回應

冷逸雲
檢舉此回應
謝謝版大喵的回覆

可能是小弟的表達不清楚

提供一張圖片說明

希望版大看過之後知道小弟的需求

圖片位置
本篇文章回覆於2019-08-29 12:39
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
10樓
回應

topcat
捐贈 VP 給 topcat 檢舉此回應
to#9

小喵寫的#8做的就是您圖裡面類似的事情
只是資料庫不同、資料不同、顯示不同(你的是橫的,我的是直的,但都是ul,li)
行為類似

您先看#8,去理解一下小喵寫的內容與做法

有看不懂的地方提出來,如果可以,自己先實做一次#8
理解貫通後,再回頭改你的程式

^_^

本篇文章回覆於2019-08-29 13:47
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
11樓
作者回應

冷逸雲
檢舉此回應
謝謝喵大

小弟PO#9樓的時候沒看到8樓
我再試試
本篇文章回覆於2019-08-29 15:13
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
12樓
作者回應

冷逸雲
檢舉此回應
謝謝喵大的協助
改成下面這樣就OK了

Code


script

本篇文章回覆於2019-08-30 11:47
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
13樓
回應

topcat
捐贈 VP 給 topcat 檢舉此回應
恭喜

這整串下來
有幾個東西提示您
1.動態產生控制項:
這樣的方式有很多魔鬼的細節存在
小喵自己是能免則免,也大都有方式可以避免
(巢狀的ListView,Repeter,GridView,...搭配控制項的Visiable)

2.CSS與jQuery的Selector Filter是相通的技巧
學一種可以應用在CSS與jQuery
有空的時候學一下,對未來的處理會有幫助

3.tag自訂屬性是個小Tips,有些問題透過這方式、搭配jQuery可以解決

以上提供您參考

^_^
本篇文章回覆於2019-08-30 12:15
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
14樓
作者回應

冷逸雲
檢舉此回應
謝謝版大喵的建議^^

不過剛剛又發現一個問題
就是當網頁閒置一段時間後<a>的 onclick 似乎沒反應,不知道問題出在哪?
需要重整網頁(F5)之後才會正常
本篇文章回覆於2019-08-30 14:22
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
15樓
回應

topcat
捐贈 VP 給 topcat 檢舉此回應
這要看您的<a>怎麼寫
小喵猜
如果您是透過javascript執行a的click
而javascript有錯誤
就可能讓js的click無效沒作用

檢查方式很簡單,開啟瀏覽器的『開發者工具』,在無法使用時,看開發者工具的『console』是否有跑出什麼問題
然後再追查下去

^.^a
本篇文章回覆於2019-08-30 15:48
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
   

回覆
如要回應,請先登入.