Question

从一个新的纯HTML文档开始，只使用HTML和Javascript。

在其上放置超链接词''food''

点击“食物”后，应将其替换为“肉类和蔬菜”

点击''肉'后，应该用''培根猪肉'代替

点击''蔬菜'后，应该用''胡萝卜加豌豆'代替

点击''猪肉'后，应更换为''坚韧耐嚼''

单击''tough''后，应将其替换为''burnt and salty''

（依此类推）

我一直试图尽我所能，但我遇到了逃避代码问题。

这是我的代码：

<span id="food"><a href="#" onclick="document.getElementById('food').innerHTML='<span id=\'meat\'><a href=\'#\' onclick=\'var meat = &#34;<span id=&#38;pork&#38;><a href=#\ onclick=alert(2)>pork</a></span> with bacon&#34;; document.getElementById(&#34;meat&#34;).innerHTML = meat\'>meat</a></span> and <span id=\'vegetables\'><a href=\'#\' onclick=\'var vegetables = &#34;carrots plus peas&#34;; document.getElementById(&#34;vegetables&#34;).innerHTML = vegetables\'>vegetables</a></span>'">food</a></span>

这里有效：http://jsfiddle.net/jshflynn/L6r5rrfx/

我很抱歉它没有间隔，但却引发了错误。

请注意''alert（2）''周围没有分隔字符，我不知道如何让它说出警告（''Hello''）。

我觉得必须采用一些递归方式来做到这一点，但我不确定。

提前致谢。特别是如果你能完全解决问题的话。

Answer 1

我认为您正在寻找以下内容：

＆＃13;

var replacements = {
  "food" : "meat and vegetables",
  "meat" : "pork with bacon",
  "vegetables" : "carrots plus peas",
  "pork" : "tough and chewy",
  "tough" : "burnt and salty" 
};

function replaceAnchor(a) {
  var elementType = "";
  var lastElementType = "";
  var target = a.innerHTML;
  var replacement = replacements[target];
  var words = replacement.split(' ');
  var newElement = {};
  for(var i = 0; i < words.length; i++) { 
  	var word = words[i];
  	if (replacements[word]) {
  	  elementType = "a";
  	} else {
  	  elementType = "span";
  	}
  	
  	if (elementType === "a" || elementType != lastElementType) {
  	  newElement = document.createElement(elementType);
  	  if (elementType === "a") {
  	    newElement.onclick = function(e) { 
  		  replaceAnchor(this);
  		  e.preventDefault();
  		};
  	  }						
  	  a.parentNode.insertBefore(newElement, a);
  	}
  	
  	if (elementType == "span") {
  	  newElement.innerHTML = newElement.innerHTML + " " + word + " ";
  	} else {
  	  newElement.innerHTML += word;
  	}
  	lastElementType = elementType;
  	
  }
  a.parentElement.removeChild(a);
  return false;
}

＆＃13;

a {
  text-decoration : underline;
  color : blue;
  cursor: pointer;
}

＆＃13;

<a onclick="return replaceAnchor(this);">food</a>

＆＃13;

Answer 2

在这里，您明白了：http://jsfiddle.net/8bhd8njh/

    function bind(obj, evt, fnc) {
        // W3C model
        if (obj.addEventListener) {
            obj.addEventListener(evt, fnc, !1);
            return !0;
        }
        // Microsoft model
        else if (obj.attachEvent) {
            return obj.attachEvent('on' + evt, fnc);
        }
        // Browser don't support W3C or MSFT model, go on with traditional
        else {
            evt = 'on'+evt;
            if(typeof obj[evt] === 'function'){
                // Object already has a function on traditional
                // Let's wrap it with our own function inside another function
                fnc = (function(f1,f2){
                    return function(){
                        f1.apply(this,arguments);
                        f2.apply(this,arguments);
                    }
                })(obj[evt], fnc);
            }
            obj[evt] = fnc;
            return !0;
        }
    }

    String.prototype.supplant = function (a, b) {
        return this.replace(/{([^{}]*)}/g, function (c, d) {
            return void 0!=a[d]?a[d]:b?'':c
        })
    };

    var data = {
        food : '{meat} and {vegetables}',
        meat : '{pork} and {beef}',
        pork : '{tough} and {chewy}',
        tough : '{burnt} and {salty}',
        vegetables : '{carrots} and {peas}'
    };

    var classname = 'game-clickable';

    var init = function(obj, data) {
        var template = '<span class="{classname}">{text}</span>';

        obj.innerHTML = obj.innerHTML.replace(/{([^{}]*)}/g, function(a,b) {
            return template.supplant({
                classname : data[b] ? classname : '',
                text : b
            }, !0)
        });

        var objects = document.getElementsByClassName('game-clickable');

        for (var i = 0; i < objects.length; i++) {
            bind(objects[i], 'click', (function(o) {
                return function() {
                    if (!data[o.innerHTML]) {
                        return;
                    }
                    var parent = o.parentNode;

                    var span = document.createElement('SPAN');
                    span.innerHTML = data[o.innerHTML];

                    parent.insertBefore(span, o);
                    parent.removeChild(o);

                    init(parent, data);
                }
            })(objects[i]));
        }
    };

    init(document.getElementById('word-game'), data);

.game-clickable {
    cursor: pointer;
    text-decoration: underline;
}

<div id="word-game">
    {food}
</div>

JS：用另一个单词替换一个链接。嵌套引号+转义码

2 个答案: