Question

我有一个带有“令牌”（字符）的表格。如果td的{{1}}为空，我想将令牌从td移到另一个{/ p>。

在我点击其中包含内容的span的第一步中，我突出显示td

在下一步中，当我点击要移动令牌的td时，我会将令牌添加到此td的{{1}}内部HTML中并清空之前点击了td的{{1}}个孩子。

足够简单。我想，JSFiddle是我想出来的，但是它没有。

https://jsfiddle.net/abyu3sg9/5/

代码会执行，但span中的td不会更改。

我不明白为什么不。

Answer 1

问题是当您尝试在此处设置值时：

$($(this).html()).html(lastclickedcontent);

$（this）.html（）返回一个字符串，在第二个框的情况下将是：

<span></span>

使用外部$（）调用$（“some html”），创建一个内容为“some html”的新DOM对象。然后你将新DOM对象的HTML设置为x“，当你真的想要设置被点击的TD内的跨度值时（这是$（this））。

我对你的小提琴进行了一些小改动，下面的示例有效：

var lastclicked = null;
var lastclickedcontent = null;
$(document).ready(function () {
    $(".clickme").click(function (event) {
        var tilecontent = $(this).children('span')[0].innerHTML;
        if (tilecontent.length > 0) {
            $(this).css('background', 'lightgreen');
            lastclicked = $(this);
            lastclickedcontent = tilecontent;
            $('p').html("GREAT! now click on the empty cell!");
        } else {
            if (lastclicked !== null) {
                $(this).children('span')[0].innerHTML = lastclickedcontent;
                //$($(this).html()).html(lastclickedcontent);
                $(lastclicked).children('span')[0].innerHTML = '';
                lastclicked.removeAttr('style');
                $('p').html("Awesome! Your token should have moved!");
            }
        }
    });
});

https://jsfiddle.net/BenjaminRay/Lo9fdL1s/

Answer 2

由于我对你要做的事情有了更多的澄清，你根本就不应该使用html。您应该寻找儿童元素。改变这个：

$($(this).html()).html(lastclickedcontent);

对此：

$(this).children("span")[0].innerHTML=lastclickedcontent;

Answer 3

我会使用localStorage，这是working jsFiddle

顺便说一句，此方法会保留您的span，并且可以让您在多个td之间移动令牌

localStorage.removeItem("lastclickedIndex");
$(document).ready(function(){
    $(".clickme").click(function(event){
        if(localStorage.getItem("lastclickedIndex") !== null && $(this).find('span').html()==''){
            var last = localStorage.getItem("lastclickedIndex");
            $(this).find('span').html( $(".clickme").eq(last).find('span').html());
            $(".clickme").eq(last).removeClass('lgrn');
            $(".clickme").eq(last).find('span').html('');
            $(this).addClass('lgrn');
            localStorage.removeItem("lastclickedIndex");
        }
        else if($(this).find('span').html()!=''){
            localStorage.setItem( "lastclickedIndex", $(".clickme").index( $(this) ) );
            $('clickme').removeClass('lgrn');
            $(this).addClass('lgrn');
        }
    });
});

使用Jquery无法更改内部html

3 个答案: