2017-03-11 20 views
1

HTMLをHTML出力レンダリングに追加するのはDIVにありますが、我々はw3data.jsを使用して外部のDIVを削除したい

<div class="test" w3-include-html="template_build/header/header-classic.html"></div> 

を、次のようなものを追加しました。しかし、出力がレンダリングする場合

<div class="test">MY INCLUDED CONTENT</div> 

ことinclduedた私はw3data.jsにレンダリング処理上のdivのクラス=「test」を削除したいです。

誰かが私を助けることができますか?

答えて

1

スニペット1は、特定の要素から任意の属性を削除する単純な機能を備えています。スニペット2は126で、余分なラインを持つw3data.jsです:

elmnt.removeAttribute("class"); 

あなたはどちらか一方が

SNIPPET 1

removeAttr(".test", "class"); 
 

 
function removeAttr(target, attribute) { 
 
    var target = document.querySelector(target); 
 
    target.removeAttribute(attribute); 
 
}
.test { color:red }
<div class="test">THIS CONTENT SHOULD BE BLACK TEXT, NOT RED</div>
同じ結果を得るために使用することができます

SNIPPET 2

/* W3Data ver 1.31 by W3Schools.com */ 
 
var w3DataObject = {}; 
 

 
function w3DisplayData(id, data) { 
 
    var htmlObj, htmlTemplate, html, arr = [], 
 
    a, l, rowClone, x, j, i, ii, cc, repeat, repeatObj, repeatX = ""; 
 
    htmlObj = document.getElementById(id); 
 
    htmlTemplate = w3InitTemplate(id, htmlObj); 
 
    html = htmlTemplate.cloneNode(true); 
 
    arr = w3GetElementsByAttribute(html, "w3-repeat"); 
 
    l = arr.length; 
 
    for (j = (l - 1); j >= 0; j -= 1) { 
 
    cc = arr[j].getAttribute("w3-repeat").split(" "); 
 
    if (cc.length == 1) { 
 
     repeat = cc[0]; 
 
    } else { 
 
     repeatX = cc[0]; 
 
     repeat = cc[2]; 
 
    } 
 
    arr[j].removeAttribute("w3-repeat"); 
 
    repeatObj = data[repeat]; 
 
    if (repeatObj && typeof repeatObj == "object" && repeatObj.length != "undefined") { 
 
     i = 0; 
 
     for (x in repeatObj) { 
 
     i += 1; 
 
     rowClone = arr[j]; 
 
     rowClone = w3NeedleInHaystack(rowClone, "element", repeatX, repeatObj[x]); 
 
     a = rowClone.attributes; 
 
     for (ii = 0; ii < a.length; ii += 1) { 
 
      a[ii].value = w3NeedleInHaystack(a[ii], "attribute", repeatX, repeatObj[x]).value; 
 
     } 
 
     (i === repeatObj.length) ? arr[j].parentNode.replaceChild(rowClone, arr[j]): arr[j].parentNode.insertBefore(rowClone, arr[j]); 
 
     } 
 
    } else { 
 
     console.log("w3-repeat must be an array. " + repeat + " is not an array."); 
 
     continue; 
 
    } 
 
    } 
 
    html = w3NeedleInHaystack(html, "element"); 
 
    htmlObj.parentNode.replaceChild(html, htmlObj); 
 

 
    function w3InitTemplate(id, obj) { 
 
    var template; 
 
    template = obj.cloneNode(true); 
 
    if (w3DataObject.hasOwnProperty(id)) { 
 
     return w3DataObject[id]; 
 
    } 
 
    w3DataObject[id] = template; 
 
    return template; 
 
    } 
 

 
    function w3GetElementsByAttribute(x, att) { 
 
    var arr = [], 
 
     arrCount = -1, 
 
     i, l, y = x.getElementsByTagName("*"), 
 
     z = att.toUpperCase(); 
 
    l = y.length; 
 
    for (i = -1; i < l; i += 1) { 
 
     if (i == -1) { 
 
     y[i] = x; 
 
     } 
 
     if (y[i].getAttribute(z) !== null) { 
 
     arrCount += 1; 
 
     arr[arrCount] = y[i]; 
 
     } 
 
    } 
 
    return arr; 
 
    } 
 

 
    function w3NeedleInHaystack(elmnt, typ, repeatX, x) { 
 
    var value, rowClone, pos1, haystack, pos2, needle = [], 
 
     needleToReplace, i, cc, r; 
 
    rowClone = elmnt.cloneNode(true); 
 
    pos1 = 0; 
 
    while (pos1 > -1) { 
 
     haystack = (typ == "attribute") ? rowClone.value : rowClone.innerHTML; 
 
     pos1 = haystack.indexOf("{{", pos1); 
 
     if (pos1 === -1) { 
 
     break; 
 
     } 
 
     pos2 = haystack.indexOf("}}", pos1 + 1); 
 
     needleToReplace = haystack.substring(pos1 + 2, pos2); 
 
     needle = needleToReplace.split("||"); 
 
     value = undefined; 
 
     for (i = 0; i < needle.length; i += 1) { 
 
     needle[i] = needle[i].replace(/^\s+|\s+$/gm, ''); //trim 
 
     //value = ((x && x[needle[i]]) || (data && data[needle[i]])); 
 
     if (x) { 
 
      value = x[needle[i]]; 
 
     } 
 
     if (value == undefined && data) { 
 
      value = data[needle[i]]; 
 
     } 
 
     if (value == undefined) { 
 
      cc = needle[i].split("."); 
 
      if (cc[0] == repeatX) { 
 
      value = x[cc[1]]; 
 
      } 
 
     } 
 
     if (value == undefined) { 
 
      if (needle[i] == repeatX) { 
 
      value = x; 
 
      } 
 
     } 
 
     if (value == undefined) { 
 
      if (needle[i].substr(0, 1) == '"') { 
 
      value = needle[i].replace(/"/g, ""); 
 
      } else if (needle[i].substr(0, 1) == "'") { 
 
      value = needle[i].replace(/'/g, ""); 
 
      } 
 
     } 
 
     if (value != undefined) { 
 
      break; 
 
     } 
 
     } 
 
     if (value != undefined) { 
 
     r = "{{" + needleToReplace + "}}"; 
 
     if (typ == "attribute") { 
 
      rowClone.value = rowClone.value.replace(r, value); 
 
     } else { 
 
      w3ReplaceHTML(rowClone, r, value); 
 
     } 
 
     } 
 
     pos1 = pos1 + 1; 
 
    } 
 
    return rowClone; 
 
    } 
 

 
    function w3ReplaceHTML(a, r, result) { 
 
    var b, l, i, a, x, j; 
 
    if (a.hasAttributes()) { 
 
     b = a.attributes; 
 
     l = b.length; 
 
     for (i = 0; i < l; i += 1) { 
 
     if (b[i].value.indexOf(r) > -1) { 
 
      b[i].value = b[i].value.replace(r, result); 
 
     } 
 
     } 
 
    } 
 
    x = a.getElementsByTagName("*"); 
 
    l = x.length; 
 
    a.innerHTML = a.innerHTML.replace(r, result); 
 
    } 
 
} 
 

 
function w3IncludeHTML() { 
 
    var z, i, elmnt, file, xhttp; 
 
    z = document.getElementsByTagName("*"); 
 
    for (i = 0; i < z.length; i++) { 
 
    elmnt = z[i]; 
 
    file = elmnt.getAttribute("w3-include-html"); 
 
    if (file) { 
 
     xhttp = new XMLHttpRequest(); 
 
     xhttp.onreadystatechange = function() { 
 
     if (this.readyState == 4 && this.status == 200) { 
 
      elmnt.innerHTML = this.responseText; 
 
      elmnt.removeAttribute("w3-include-html"); 
 
      elmnt.removeAttribute("class"); // Add this expression 
 
      w3IncludeHTML(); 
 
     } 
 
     } 
 
     xhttp.open("GET", file, true); 
 
     xhttp.send(); 
 
     return; 
 
    } 
 
    } 
 
} 
 

 
function w3Http(target, readyfunc, xml, method) { 
 
    var httpObj; 
 
    if (!method) { 
 
    method = "GET"; 
 
    } 
 
    if (window.XMLHttpRequest) { 
 
    httpObj = new XMLHttpRequest(); 
 
    } else if (window.ActiveXObject) { 
 
    httpObj = new ActiveXObject("Microsoft.XMLHTTP"); 
 
    } 
 
    if (httpObj) { 
 
    if (readyfunc) { 
 
     httpObj.onreadystatechange = readyfunc; 
 
    } 
 
    httpObj.open(method, target, true); 
 
    httpObj.send(xml); 
 
    } 
 
}

+0

答えてくれてありがとうしかし、私はjQueryの経由でこれを解決し、それを編集していないため、現在JavaScriptを維持しています。
'のjQuery( 'テスト')それぞれ(関数(){ VARのCNT = jQueryの(この).contents(); jQueryの(この).replaceWith(CNT); })。 ' –

+0

@UranboldNergvi *"そのdivクラス= "test" "*を削除したいのですが、どうやって' .test'クラスを作り直すのですか? – zer00ne

関連する問題