Untitled diff
51 lines
{
{
"id": "bad87fee1348bd9aed508826",
"id": "bad87fee1348bd9aed508826",
"title": "Clone an Element Using jQuery",
"title": "Clone an Element Using jQuery",
"description": [
"description": [
"In addition to moving elements, you can also copy them from one place to another.",
"除了移动元素，你还可以拷贝元素。简单理解：移动元素就是剪切，拷贝元素就是复制。",
"jQuery has a function called <code>clone()</code> that makes a copy of an element.",
"jQuery的<code>clone()</code>方法可以拷贝元素。",
"For example, if we wanted to copy <code>target2</code> from our <code>left-well</code> to our <code>right-well</code>, we would use:",
"比如，如果我想把<code>target2</code>从<code>left-well</code>拷贝到<code>right-well</code>，我们可以这样写:",
"<code>$(\"#target2\").clone().appendTo(\"#right-well\");</code>",
"<code>$(\"#target2\").clone().appendTo(\"#right-well\");</code>",
"Did you notice this involves sticking two jQuery functions together? This is called <code>function chaining</code> and it's a convenient way to get things done with jQuery.",
"你有没有发现两个jQuery方法合在一起使用了？这就叫方法链<code>function chaining</code>，使用起来很方便。",
"Clone your <code>target5</code> element and append it to your <code>left-well</code>."
"复制<code>target5</code>元素追加到<code>left-well</code>。",
"<strong>提示：</strong>当你点击run tests后left-well会有两个#target5，千万别以为这是bug。实际上是因为编辑器中的代码会自动执行一次，点击run后会再执行一次，所以有两个#target5。"
],
],
"challengeSeed": [
"challengeSeed": [
"fccss",
"fccss",
" $(document).ready(function() {",
" $(document).ready(function() {",
" $(\"#target1\").css(\"color\", \"red\");",
" $(\"#target1\").css(\"color\", \"red\");",
" $(\"#target1\").prop(\"disabled\", true);",
" $(\"#target1\").prop(\"disabled\", true);",
" $(\"#target4\").remove();",
" $(\"#target4\").remove();",
" $(\"#target2\").appendTo(\"#right-well\");",
" $(\"#target2\").appendTo(\"#right-well\");",
"",
"",
" });",
" });",
"fcces",
"fcces",
"",
"",
"<!-- Only change code above this line. -->",
"<!-- 请只修改这条注释以上的代码 -->",
"",
"",
"<div class=\"container-fluid\">",
"<div class=\"container-fluid\">",
" <h3 class=\"text-primary text-center\">jQuery Playground</h3>",
" <h3 class=\"text-primary text-center\">jQuery Playground</h3>",
" <div class=\"row\">",
" <div class=\"row\">",
" <div class=\"col-xs-6\">",
" <div class=\"col-xs-6\">",
" <h4>#left-well</h4>",
" <h4>#left-well</h4>",
" <div class=\"well\" id=\"left-well\">",
" <div class=\"well\" id=\"left-well\">",
" <button class=\"btn btn-default target\" id=\"target1\">#target1</button>",
" <button class=\"btn btn-default target\" id=\"target1\">#target1</button>",
" <button class=\"btn btn-default target\" id=\"target2\">#target2</button>",
" <button class=\"btn btn-default target\" id=\"target2\">#target2</button>",
" <button class=\"btn btn-default target\" id=\"target3\">#target3</button>",
" <button class=\"btn btn-default target\" id=\"target3\">#target3</button>",
" </div>",
" </div>",
" </div>",
" </div>",
" <div class=\"col-xs-6\">",
" <div class=\"col-xs-6\">",
" <h4>#right-well</h4>",
" <h4>#right-well</h4>",
" <div class=\"well\" id=\"right-well\">",
" <div class=\"well\" id=\"right-well\">",
" <button class=\"btn btn-default target\" id=\"target4\">#target4</button>",
" <button class=\"btn btn-default target\" id=\"target4\">#target4</button>",
" <button class=\"btn btn-default target\" id=\"target5\">#target5</button>",
" <button class=\"btn btn-default target\" id=\"target5\">#target5</button>",
" <button class=\"btn btn-default target\" id=\"target6\">#target6</button>",
" <button class=\"btn btn-default target\" id=\"target6\">#target6</button>",
" </div>",
" </div>",
" </div>",
" </div>",
" </div>",
" </div>",
"</div>"
"</div>"
],
],
"tests": [
"tests": [
"assert($(\"#right-well\").children(\"#target5\").length > 0, 'message: Your <code>target5</code> element should be inside your <code>right-well</code>.');",
"assert($(\"#right-well\").children(\"#target5\").length > 0, 'message: 你的<code>target5</code> 元素应该在 <code>right-well</code>里面。');",
"assert($(\"#left-well\").children(\"#target5\").length > 0, 'message: A copy of your <code>target5</code> element should also be inside your <code>left-well</code>.');",
"assert($(\"#left-well\").children(\"#target5\").length > 0, 'message: 克隆的<code>target5</code> 元素也应该在 <code>left-well</code>里面。');",
"assert(!code.match(/class.*animated/g), 'message: Only use jQuery to move these elements.');"
"assert(!code.match(/class.*animated/g), 'message: 请使用jQuery来实现，而不是原生js。');"
],
],