如何改變parentNode風格上childNode事件屬性

Question

嗨，我有一個UL像這樣：

<ul id="list"> 
    <li class="something"> 
     <div class="btns" onclick="add(this)"> + </div> 
     <div class="btns" onclick="sub(this)"> - </div> 
    </li> 
    <li class="something new"> 
     <div class="btns" onclick="add(this)"> + </div> 
     <div class="btns" onclick="sub(this)"> - </div> 
    </li> 
</ul> 

CSS明智的，一流的「東西」包含背景圖像。

我想在這裏實現什麼，是當加（）或子（）的調用函數，進行呼叫改變元素的parentNode的background-image屬性...

所以這樣，我不必爲每個元素製作ID，並且可以重複使用相同的函數...

我所擁有的是類似這樣的東西，但它不起作用（而是代碼我寫的是錯的）：

function add(x) 
{ 
    var y = x.parentNode.style; 

    if (y.backgroundImage == 'url("../assets/1.png")' 
    { 
     y.backgroundImage = 'url("../assets/2.png")'; 
    } else if (y.backgroundImage == 'url("../assets/2.png")' 
     y.backgroundImage = 'url("../assets/3.png")'; 
    ... 
    ... so on so forth... 
} 

整體邏輯本身可能是p OOR，所以我願意接受新的建議太...

編輯＃1：增加了更多的細節來解釋目前的情況......

從本質上講，有其填充了李的一個3x3的網格，背景圖像使用點指示當前數量。每個裏面都有兩個按鈕，用於添加和減少。點擊每一個，背景圖像應該改變以表示當前數量...並且這必須獨立於不同的li完成...

Answer 1

我同意RobG使用類更適合 - 尤其是如果你決定使用框架。在關閉情況下，你不希望這裏有一些其他的方法：

更新了計算樣式 - 留下評論版在後期底部： 在這其中的主要區別是，它得到的內聯樣式或計算版本的背景圖像（例如，如果它是由類設置的）。

要獲得計算樣式，請查看quirksmode.org。特別是getstyles page的底部。

這是一個fiddle不工作在jsfiddle（有點累了，但我認爲它與我在工作中使用IE6 ...），但工作正常，如果你在一個正常的設置本地進行。

function add(x) { 
    var parent = x.parentNode; 
    var y = parent.currentStyle['backgroundImage'] || document.defaultView.getComputedStyle(parent,null).getPropertyValue('backgroundImage'); 
    switch(true) 
    { 
     case (y.indexOf("1.png")!=-1): 
      parent.style.backgroundImage = 'url("http://www.wskidmore.com/2.png")'; 
      break; 
     case (y.indexOf("2.png")!=-1): 
      parent.style.backgroundImage = 'url("http://www.wskidmore.com/3.png")'; 
      break; 
     case (y.indexOf("3.png")!=-1): 
      parent.style.backgroundImage = 'url("http://www.wskidmore.com/1.png")'; 
      break; 
    } 
} 

過時的，但評論邏輯。

function add(x) { 
     var y = x.parentNode.style.backgroundImage; 
    // using indexOf will avoid the possible quote issue and possibly other odd browser quirks 
    // switch true means it will do the first case it finds that evaluates to true 
    switch(true) 
    { 
     // indexof means it looks through your string for the given substring 
     // and returns the position so, "abc".indexOf("b") returns 1 (its 0 based) 
     // if it doesnt find it anywhere it returns -1 
     // so for our switch, it looks inside the backgroundImage string 
     // url("../assets/x.png") no-repeat 50% 50% 
     // or whatever it may be for the part "1.png" 
     // if it finds it, it will return 5, or 8, or whatever the position is 
     // if not it returns -1 
     // so when this gets evaluated we check for "not -1" 
     case (y.indexOf("1.png")!=-1): 
      // if this case is true, then everything between the : and break; 
      // will be performed, then it exits the switch 
      y = 'url("../assets/2.png")'; 
      break;  
     case (y.indexOf("2.png")!=-1): 
      y = 'url("../assets/3.png")'; 
      break;  
     case (y.indexOf("3.png")!=-1): 
      y = 'url("../assets/4.png")'; 
      break;  
    } 
} 

Answer 2

使用getElementsByName（）函數，設置相同的名稱on所有你想改變的節點。

function add(x) { 
    var elements = document.getElementsByName("somename"); 
    /* Iterate over the array and set the .style.* elements as needed */ 
} 

http://www.w3schools.com/jsref/met_doc_getelementsbyname.asp

Answer 3

您的代碼應該工作正常，但你匹配現有的背景圖像錯誤。它不會返回與您設置相同的引用。

//When setting the url property, you need to wrap the actual URI in double quotes 
//and then wrap the whole thing in single quotes to indicate to JS that it's a string 
y.backgroundImage = 'url("../assets/1.png")'; //set background image 

//y.backgroundImage now has a value of 'url(../assets/1.png)'  

//Here you try to match the value of y.backgroundImage against the string you 
//originally stored in it, but that won't work 
y.backgroundImage == 'url("../assets/1.png")'; //false 

//The backgroundImage property returns a string that has the quotes stripped 
//out of the inside of the URL definition 
y.backgroundImage == "url(../assets/1.png)"; //true 

Answer 4

您似乎在找到parentNode ok。除了設置樣式對象的屬性之外，還可以考慮添加和刪除類。一些簡單的功能是：

var yourLib = { 
    dom: {}, 
    util: {} 
}; 

/* Check if an element has a particular class name 
*/ 
yourLib.dom.hasClassName = function(el, cName) { 
    if (typeof el == 'string') el = document.getElementById(el); 

    var re = new RegExp('(^|\\s+)' + cName + '(\\s+|$)'); 
    return el && re.test(el.className); 
} 

/* Add a class name if element doesn't already have it 
*/ 
yourLib.dom.addClassName = function(el, cName) { 

    if (typeof el == 'string') el = document.getElementById(el); 

    if (!yourLib.dom.hasClassName(el, cName)) { 
     el.className = yourLib.util.trim(el.className + ' ' + cName); 
    } 
} 

/* Remove a class name if element has it 
*/ 
yourLib.dom.removeClassName = function(el, cName) { 

    if (typeof el == 'string') el = document.getElementById(el); 

    if (util.dom.hasClassName(el, cName)) { 
     var re = new RegExp('(^|\\s+)' + cName + '(\\s+|$)','g'); 
     el.className = yourLib.util.trim(el.className.replace(re, '')); 
    } 
} 

/* Remove leading and trailing whitespace and reduce 
** multiple intermediate whitespaces to a single space 
*/ 
yourLib.util.trim = function(s) { 
    return s.replace(/(^\s+)|(\s+$)/g,'').replace(/\s+/g,' '); 
} 

Answer 5

好了，我懂了工作，這裏是爲誰以後在此絆倒的解決方案...

function add(x) 
{ 
    var y = x.parentNode.style.backgroundImage; 
    if ((y == '') || (y.indexOf("3_0.png") != -1)) 
     x.parentNode.style.backgroundImage = 'url(../_assets/3_1.png)'; 
    else if (y.indexOf("3_1.png") != -1) 
     x.parentNode.style.backgroundImage = 'url(../_assets/3_2.png)'; 
    else if (y.indexOf("3_2.png") != -1) 
     x.parentNode.style.backgroundImage = 'url(../_assets/3_3.png)'; 
    else if (y.indexOf("3_-3.png") != -1) 
     x.parentNode.style.backgroundImage = 'url(../_assets/3_-2.png)'; 
    else if (y.indexOf("3_-2.png") != -1) 
     x.parentNode.style.backgroundImage = 'url(../_assets/3_-1.png)'; 
    else if (y.indexOf("3_-1.png") != -1) 
     x.parentNode.style.backgroundImage = 'url(../_assets/3_0.png)'; 
} 

基本上，WSkid的幫助（謝謝！）我用「的indexOf」以確定哪個是當前背景，並相應地根據調用哪個函數而改變。這是添加功能的代碼。