fix(i18n): update Chinese translation of jquery (#38579)

Co-authored-by: Zhicheng Chen <chenzhicheng@dayuwuxian.com> Co-authored-by: S1ngS1ng <liuxing0514@gmail.com>
2020-09-07 16:17:51 +08:00
parent 0b2be70c9a
commit 3b7b64feb3
18 changed files with 1043 additions and 358 deletions
--- a/curriculum/challenges/chinese/03-front-end-libraries/jquery/change-text-inside-an-element-using-jquery.chinese.md
+++ b/curriculum/challenges/chinese/03-front-end-libraries/jquery/change-text-inside-an-element-using-jquery.chinese.md
@ -2,15 +2,25 @@
 id: 564944c91be2204b269d51e3
 title: Change Text Inside an Element Using jQuery
 challengeType: 6
-videoUrl: ''
-localeTitle: 使用jQuery更改元素内的文本
+forumTopicId: 16773
+localeTitle: 使用 jQuery 更改元素内部的文本
 ---

 ## Description
-<section id="description">使用jQuery，您可以更改元素的开始和结束标记之间的文本。您甚至可以更改HTML标记。 jQuery有一个名为<code>.html()</code>的函数，它允许您在元素中添加HTML标记和文本。之前在元素中的任何内容都将完全替换为您使用此功能提供的内容。以下是重写和强调标题文本的方法： <code>$(&quot;h3&quot;).html(&quot;&lt;em&gt;jQuery Playground&lt;/em&gt;&quot;);</code> jQuery也有一个类似的函数<code>.text()</code> ，它只改变文本而不添加标签。换句话说，此函数不会评估传递给它的任何HTML标记，而是将其视为要替换现有内容的文本。通过强调其文本来更改id为<code>target4</code>的按钮。查看此<a href="https://developer.mozilla.org/en/docs/Web/HTML/Element/em" target="_blank">链接</a>以了解有关<code>&lt;i&gt;</code>和<code>&lt;em&gt;</code>之间的区别及其用途的更多信息。请注意，虽然<code>&lt;i&gt;</code>标签传统上一直用于强调文本，但它已被合并用作图标标签。 <code>&lt;em&gt;</code>标签现在被广泛接受为强调标签。两者都可以应对这一挑战。 </section>
+<section id='description'>
+你能用 jQuery 改变起始标签和结束标签之间的文本，甚至改变 HTML 标签。
+jQuery 有一个<code>.html()</code>函数，你能用其在标签里添加 HTML 标签和文本，函数提供的内容将完全替换之前标签的内容。
+下面的代码效果是重写并强调标题文本：
+<code>$("h3").html("&#60;em&#62;jQuery Playground&#60;/em&#62;");</code>
+类似的，jQuery 有一个<code>.text()</code>函数，其改变文本而不增加标签。换而言之，该函数会忽略所有传递过来的 HTML 标签，并将其视为用来替换原文本的文本。
+请强调 id 为<code>target4</code>的按钮的文本。
+请查看此<a href="https://developer.mozilla.org/en/docs/Web/HTML/Element/em" target="_blank">链接</a>来了解更多<code>&#60;i&#62;</code>和<code>&#60;em&#62;</code>的区别和用法。
+注意，<code>&#60;i&#62;</code>标签虽然传统上用来强调文本，但此后常用作图标的标签；<code>&#60;em&#62;</code>标签作为强调标签现在已被广泛接受。两者都可以应对本次挑战。
+</section>

 ## Instructions
-<section id="instructions">
+<section id='instructions'>
+
 </section>

 ## Tests
@ -18,15 +28,15 @@ localeTitle: 使用jQuery更改元素内的文本

 ```yml
 tests:
-  - text: 通过添加HTML标记强调<code>target4</code>按钮中的文本。
+  - text: 通过添加 HTML 标签强调<code>target4</code>按钮中的文本。
    testString: assert.isTrue((/<em>|<i>\s*#target4\s*<\/em>|<\/i>/gi).test($("#target4").html()));
-  - text: 确保文本不变。
+  - text: 确保文本不乱。
    testString: assert($("#target4") && $("#target4").text().trim() === '#target4');
-  - text: 不要改变任何其他文字。
+  - text: 不改变其他任何文本内容。
    testString: assert.isFalse((/<em>|<i>/gi).test($("h3").html()));
-  - text: 确保使用<code>.html()</code>而不是<code>.text()</code> 。
+  - text: 确保使用<code>.html()</code>方法而不是<code>.text()</code>方法。
    testString: assert(code.match(/\.html\(/g));
-  - text: 确保使用jQuery选择<code>button id=&quot;target4&quot;</code> 。
+  - text: "确保用 jQuery 选取<code>button id='target4'</code>。"
    testString: assert(code.match(/\$\(\s*?(\"|\')#target4(\"|\')\s*?\)\.html\(/));

 ```
@ -46,7 +56,7 @@ tests:
  });
 </script>

-<!-- Only change code above this line. -->
+<!-- 请修改本行以上的代码 -->

 <div class="container-fluid">
  <h3 class="text-primary text-center">jQuery Playground</h3>
@ -69,7 +79,6 @@ tests:
    </div>
  </div>
 </div>
-
 ```

 </div>
@ -81,8 +90,35 @@ tests:
 ## Solution
 <section id='solution'>

-```js
-// solution required
+```html
+<script>
+  $(document).ready(function() {
+    $("#target1").css("color", "red");
+    $("#target4").html('<em>#target4</em>');
+  });
+</script>
+
+<div class="container-fluid">
+  <h3 class="text-primary text-center">jQuery Playground</h3>
+  <div class="row">
+    <div class="col-xs-6">
+      <h4>#left-well</h4>
+      <div class="well" id="left-well">
+        <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="target3">#target3</button>
+      </div>
+    </div>
+    <div class="col-xs-6">
+      <h4>#right-well</h4>
+      <div class="well" id="right-well">
+        <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="target6">#target6</button>
+      </div>
+    </div>
+  </div>
+</div>
 ```

-/section>
+</section>
--- a/curriculum/challenges/chinese/03-front-end-libraries/jquery/change-the-css-of-an-element-using-jquery.chinese.md
+++ b/curriculum/challenges/chinese/03-front-end-libraries/jquery/change-the-css-of-an-element-using-jquery.chinese.md
@ -4,15 +4,24 @@ title: Change the CSS of an Element Using jQuery
 required:
  - link: 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.css'
 challengeType: 6
-videoUrl: ''
+forumTopicId: 16776
 localeTitle: 使用 jQuery 更改元素的 CSS
 ---

 ## Description
-<section id="description">我们也可以使用jQuery直接更改HTML元素的CSS。 jQuery有一个名为<code>.css()</code>的函数，允许您更改元素的CSS。以下是我们将其颜色更改为蓝色的方法： <code>$(&quot;#target1&quot;).css(&quot;color&quot;, &quot;blue&quot;);</code>这与普通的CSS声明略有不同，因为CSS属性及其值在引号中，并用逗号而不是冒号分隔。删除jQuery选择器，留下一个空的<code>document ready function</code> 。选择<code>target1</code>并将其颜色更改为红色。 </section>
+<section id='description'>
+我们也能用 jQuery 直接改变 HTML 标签的 CSS。
+jQuery 有一个<code>.css()</code>方法，其能改变标签的 CSS。
+下面的代码效果是把颜色变蓝：
+<code>$("#target1").css("color", "blue");</code>
+这与通常的 CSS 声明略有不同，因为这个 CSS 属性和它的值在英文引号里，并且它们用逗号而不是冒号间隔开。
+删除你的jQuery选择器，并留下空的<code>document ready function</code>。
+请选择<code>target1</code>并将其颜色变为红色（red）。
+</section>

 ## Instructions
-<section id="instructions">
+<section id='instructions'>
+
 </section>

 ## Tests
@ -20,9 +29,9 @@ localeTitle: 使用jQuery更改元素的CSS

 ```yml
 tests:
-  - text: 您的<code>target1</code>元素应该有红色文本。
+  - text: <code>target1</code>标签应该有红色文本。
    testString: assert($("#target1").css("color") === 'rgb(255, 0, 0)');
-  - text: 只使用jQuery将这些类添加到元素中。
+  - text: 仅用 jQuery 给标签添加类。
    testString: assert(!code.match(/class.*animated/g));

 ```
@ -45,7 +54,7 @@ tests:
  });
 </script>

-<!-- Only change code above this line. -->
+<!-- 请修改本行以上的代码 -->

 <div class="container-fluid">
  <h3 class="text-primary text-center">jQuery Playground</h3>
@ -68,7 +77,6 @@ tests:
    </div>
  </div>
 </div>
-
 ```

 </div>
@ -80,8 +88,39 @@ tests:
 ## Solution
 <section id='solution'>

-```js
-// solution required
+```html
+<script>
+  $(document).ready(function() {
+    $("button").addClass("animated bounce");
+    $(".well").addClass("animated shake");
+    $("#target3").addClass("animated fadeOut");
+    $("button").removeClass("btn-default");
+    $("#target1").css("color", "red");
+  });
+</script>
+
+<!-- Only change code above this line. -->
+<div class="container-fluid">
+  <h3 class="text-primary text-center">jQuery Playground</h3>
+  <div class="row">
+    <div class="col-xs-6">
+      <h4>#left-well</h4>
+      <div class="well" id="left-well">
+        <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="target3">#target3</button>
+      </div>
+    </div>
+    <div class="col-xs-6">
+      <h4>#right-well</h4>
+      <div class="well" id="right-well">
+        <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="target6">#target6</button>
+      </div>
+    </div>
+  </div>
+</div>
 ```

-/section>
+</section>
--- a/curriculum/challenges/chinese/03-front-end-libraries/jquery/clone-an-element-using-jquery.chinese.md
+++ b/curriculum/challenges/chinese/03-front-end-libraries/jquery/clone-an-element-using-jquery.chinese.md
@ -2,15 +2,23 @@
 id: bad87fee1348bd9aed508826
 title: Clone an Element Using jQuery
 challengeType: 6
-videoUrl: ''
+forumTopicId: 16780
 localeTitle: 使用 jQuery 克隆元素
 ---

 ## Description
-<section id="description">除了移动元素，您还可以将它们从一个地方复制到另一个地方。 jQuery有一个名为<code>clone()</code>的函数，它可以复制一个元素。例如，如果我们想将<code>target2</code>从我们的<code>left-well</code>复制到<code>right-well</code> ，我们将使用： <code>$(&quot;#target2&quot;).clone().appendTo(&quot;#right-well&quot;);</code>您是否注意到这涉及将两个jQuery函数粘在一起？这称为<code>function chaining</code> ，它是使用jQuery完成任务的便捷方式。克隆你的<code>target5</code>元素并将其附加到你的<code>left-well</code> 。 </section>
+<section id='description'>
+除了移动标签，也可以把元素从一个地方复制到另一地方。
+jQuery 有一个<code>clone()</code>方法，可以复制标签。
+例如，如果想把<code>target2</code>从<code>left-well</code>复制到<code>right-well</code>，可以设置如下：
+<code>$("#target2").clone().appendTo("#right-well");</code>
+你是否注意到这两个 jQuery 方法连在一起了吗？这被称为<code>链式调用（function chaining）</code>，是一种用 jQuery 实现效果的简便方法。
+克隆<code>target5</code>标签并附加到<code>left-well</code>。
+</section>

 ## Instructions
-<section id="instructions">
+<section id='instructions'>
+
 </section>

 ## Tests
@ -18,11 +26,11 @@ localeTitle: 使用jQuery克隆元素

 ```yml
 tests:
-  - text: 你的<code>target5</code>元素应该在你的<code>right-well</code> 。
+  - text: <code>target5</code>标签应该在<code>right-well</code>内。
    testString: assert($("#right-well").children("#target5").length > 0);
-  - text: 您的<code>target5</code>元素的副本也应该在您的<code>left-well</code> 。
+  - text: 克隆<code>target5</code>标签并放在<code>left-well</code>内。
    testString: assert($("#left-well").children("#target5").length > 0);
-  - text: 只使用jQuery来移动这些元素。
+  - text: 仅用 jQuery 移动这些标签。
    testString: assert(!code.match(/class.*animated/g));

 ```
@ -45,6 +53,51 @@ tests:
  });
 </script>

+<!-- 请修改本行以上的代码 -->
+
+<div class="container-fluid">
+  <h3 class="text-primary text-center">jQuery Playground</h3>
+  <div class="row">
+    <div class="col-xs-6">
+      <h4>#left-well</h4>
+      <div class="well" id="left-well">
+        <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="target3">#target3</button>
+      </div>
+    </div>
+    <div class="col-xs-6">
+      <h4>#right-well</h4>
+      <div class="well" id="right-well">
+        <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="target6">#target6</button>
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+</div>
+
+
+
+</section>
+
+## Solution
+<section id='solution'>
+
+```html
+<script>
+  $(document).ready(function() {
+    $("#target1").css("color", "red");
+    $("#target1").prop("disabled", true);
+    $("#target4").remove();
+    $("#target2").appendTo("#right-well");
+    $("#target5").clone().appendTo("#left-well");
+  });
+</script>
+
 <!-- Only change code above this line. -->

 <div class="container-fluid">
@ -68,20 +121,6 @@ tests:
    </div>
  </div>
 </div>
-
 ```

-</div>
-
-
-
 </section>
-
-## Solution
-<section id='solution'>
-
-```js
-// solution required
-```
-
-/section>
--- a/curriculum/challenges/chinese/03-front-end-libraries/jquery/delete-your-jquery-functions.chinese.md
+++ b/curriculum/challenges/chinese/03-front-end-libraries/jquery/delete-your-jquery-functions.chinese.md
@ -4,15 +4,19 @@ title: Delete Your jQuery Functions
 required:
  - link: 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.css'
 challengeType: 6
-videoUrl: ''
-localeTitle: 删除您的jQuery函数
+forumTopicId: 17561
+localeTitle: 删除 jQuery 函数
 ---

 ## Description
-<section id="description">这些动画起初很酷，但现在它们让人分心。从<code>document ready function</code>删除所有这三个jQuery函数，但保留<code>document ready function</code>本身。 </section>
+<section id='description'>
+这些动画开始看起来很酷，但是有时可能会让用户分心。
+请删除<code>document ready function</code>内的三个 jQuery 函数，但保留<code>document ready function</code>本身。
+</section>

 ## Instructions
-<section id="instructions">
+<section id='instructions'>
+
 </section>

 ## Tests
@ -20,15 +24,15 @@ localeTitle: 删除您的jQuery函数

 ```yml
 tests:
-  - text: 从<code>document ready function</code>删除所有三个jQuery <code>document ready function</code> 。
+  - text: 删除<code>document ready function</code>中的三个 jQuery 函数。
    testString: assert(code.match(/\{\s*\}\);/g));
-  - text: 保持<code>script</code>元素不变。
+  - text: 保持<code>script</code>标签不变。
    testString: assert(code.match(/<script>/g));
-  - text: '将<code>$(document).ready(function() {</code>保留到<code>script</code>元素的开头。'
+  - text: 保持<code>$&#40document&#41.ready&#40function&#40&#41 {</code>在<code>script</code>标签的开头不变。
    testString: assert(code.match(/\$\(document\)\.ready\(function\(\)\s?\{/g));
-  - text: '保持“文档就绪功能”关闭<code>})</code>完好无损。'
+  - text: "保持 'document ready function' 用<code>&#125;&#41;</code>闭合。"
    testString: assert(code.match(/.*\s*\}\);/g));
-  - text: 保持<code>script</code>元素结束标记不变。
+  - text: 保持<code>script</code>标签闭合。
    testString: assert(code.match(/<\/script>/g) && code.match(/<script/g) && code.match(/<\/script>/g).length === code.match(/<script/g).length);

 ```
@ -50,6 +54,47 @@ tests:
  });
 </script>

+<!-- 请修改本行以上的代码 -->
+
+<div class="container-fluid">
+  <h3 class="text-primary text-center">jQuery Playground</h3>
+  <div class="row">
+    <div class="col-xs-6">
+      <h4>#left-well</h4>
+      <div class="well" id="left-well">
+        <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="target3">#target3</button>
+      </div>
+    </div>
+    <div class="col-xs-6">
+      <h4>#right-well</h4>
+      <div class="well" id="right-well">
+        <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="target6">#target6</button>
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+</div>
+
+
+
+</section>
+
+## Solution
+<section id='solution'>
+
+```html
+<script>
+  $(document).ready(function() {
+
+  });
+</script>
+
 <!-- Only change code above this line. -->

 <div class="container-fluid">
@ -73,20 +118,6 @@ tests:
    </div>
  </div>
 </div>
-
 ```

-</div>
-
-
-
 </section>
-
-## Solution
-<section id='solution'>
-
-```js
-// solution required
-```
-
-/section>
--- a/curriculum/challenges/chinese/03-front-end-libraries/jquery/disable-an-element-using-jquery.chinese.md
+++ b/curriculum/challenges/chinese/03-front-end-libraries/jquery/disable-an-element-using-jquery.chinese.md
@ -2,15 +2,23 @@
 id: bad87fee1348bd9aed808826
 title: Disable an Element Using jQuery
 challengeType: 6
-videoUrl: ''
+forumTopicId: 17563
 localeTitle: 使用 jQuery 禁用元素
 ---

 ## Description
-<section id="description">您还可以使用jQuery更改HTML元素的非CSS属性。例如，您可以禁用按钮。禁用按钮后，它将变为灰色，无法再单击。 jQuery有一个名为<code>.prop()</code>的函数，允许您调整元素的属性。以下是禁用所有按钮的方法： <code>$(&quot;button&quot;).prop(&quot;disabled&quot;, true);</code>仅禁用<code>target1</code>按钮。 </section>
+<section id='description'>
+你还能用 jQuery 改变 HTML 标签的非 CSS 属性,例如:能禁用按钮。
+当你禁用按钮时，它将变成灰色并无法点击。
+jQuery 有一个<code>.prop()</code>方法，你可以用其调整标签的属性。
+下面的代码效果是禁用所有的按钮：
+<code>$("button").prop("disabled", true);</code>
+请仅禁用<code>target1</code>按钮。
+</section>

 ## Instructions
-<section id="instructions">
+<section id='instructions'>
+
 </section>

 ## Tests
@ -20,9 +28,9 @@ localeTitle: 使用jQuery禁用元素
 tests:
  - text: 禁用<code>target1</code>按钮。
    testString: assert($("#target1") && $("#target1").prop("disabled") && code.match(/["']disabled["'],( true|true)/g));
-  - text: 不要禁用任何其他按钮。
+  - text: 不禁用其他的按钮。
    testString: assert($("#target2") && !$("#target2").prop("disabled"));
-  - text: 只使用jQuery将这些类添加到元素中。
+  - text: 仅用 jQuery 给标签添加类。
    testString: assert(!code.match(/disabled[^<]*>/g));

 ```
@ -42,6 +50,49 @@ tests:
  });
 </script>

+<!-- 请修改本行以上的代码 -->
+
+<div class="container-fluid">
+  <h3 class="text-primary text-center">jQuery Playground</h3>
+  <div class="row">
+    <div class="col-xs-6">
+      <h4>#left-well</h4>
+      <div class="well" id="left-well">
+        <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="target3">#target3</button>
+      </div>
+    </div>
+    <div class="col-xs-6">
+      <h4>#right-well</h4>
+      <div class="well" id="right-well">
+        <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="target6">#target6</button>
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+</div>
+
+
+
+</section>
+
+## Solution
+<section id='solution'>
+
+```html
+<script>
+  $(document).ready(function() {
+    $("#target1").css("color", "red");
+    $("#target1").prop("disabled", true);
+
+  });
+</script>
+
 <!-- Only change code above this line. -->

 <div class="container-fluid">
@ -65,20 +116,6 @@ tests:
    </div>
  </div>
 </div>
-
 ```

-</div>
-
-
-
 </section>
-
-## Solution
-<section id='solution'>
-
-```js
-// solution required
-```
-
-/section>
--- a/curriculum/challenges/chinese/03-front-end-libraries/jquery/learn-how-script-tags-and-document-ready-work.chinese.md
+++ b/curriculum/challenges/chinese/03-front-end-libraries/jquery/learn-how-script-tags-and-document-ready-work.chinese.md
@ -2,15 +2,24 @@
 id: bad87fee1348bd9acdd08826
 title: Learn How Script Tags and Document Ready Work
 challengeType: 6
-videoUrl: ''
-localeTitle: 了解脚本标签和文档准备工作的方式
+forumTopicId: 18224
+localeTitle: 了解 script 和 document.ready 是如何工作的
 ---

 ## Description
-<section id="description">现在我们已经准备好学习jQuery，这是有史以来最流行的JavaScript工具。在我们开始使用jQuery之前，我们需要在HTML中添加一些内容。首先，在页面顶部添加一个<code>script</code>元素。请务必在以下行中关闭它。您的浏览器将在<code>script</code>元素中运行任何JavaScript，包括jQuery。在您的<code>script</code>元素中，添加以下代码： <code>$(document).ready(function() {</code>到您的<code>script</code> 。然后在以下行（仍然在您的<code>script</code>元素中）关闭它： <code>});</code>我们稍后会详细了解这些<code>functions</code> 。重要的是要知道，在浏览器加载页面后，您放入此<code>function</code>代码将立即运行。这很重要，因为没有您的<code>document ready function</code> ，您的代码可能会在HTML呈现之前运行，这会导致错误。 </section>
+<section id='description'>
+现在我们已经准备好学习有史以来最受欢迎的 JavaScript 框架——jQuery 了。
+在使用 jQuery 之前，我们需要在 HTML 页面中添加一些东西。
+首先，在页面顶部添加<code>script</code>标签，记得在后面为<code>script</code>标签添加结束标签。
+浏览器在<code>script</code>标签中运行所有的 JavaScript 脚本包括 jQuery。
+在<code>script</code>标签中添加代码<code>$(document).ready(function() {</code>。然后在后面（仍在该<code>script</code>标签内）用<code>});</code>闭合它。
+稍后我们将详细介绍<code>functions</code>，现在需要知道的是，只要浏览器加载页面，<code>function</code>中放入的代码就会运行。
+有一点很重要，如果没有<code>document ready function</code>，你的代码将在 HTML 页面呈现之前运行，这将导致错误。
+</section>

 ## Instructions
-<section id="instructions">
+<section id='instructions'>
+
 </section>

 ## Tests
@ -18,11 +27,11 @@ localeTitle: 了解脚本标签和文档准备工作的方式

 ```yml
 tests:
-  - text: 创建一个<code>script</code>元素，确保它有效并具有结束标记。
+  - text: 创建一个<code>script</code>标签，确保其有效并具有闭合标签。
    testString: 'assert(code.match(/<\/script\s*>/g) && code.match(/<script(\sasync|\sdefer)*(\s(charset|src|type)\s*=\s*["\"]+[^"\"]*["\"]+)*(\sasync|\sdefer)*\s*>/g) && code.match(/<\/script\s*>/g).length === code.match(/<script(\sasync|\sdefer)*(\s(charset|src|type)\s*=\s*["\"]+[^"\"]*["\"]+)*(\sasync|\sdefer)*\s*>/g).length);'
-  - text: '您应该将<code>$(document).ready (function() {</code>到<code>script</code>元素的开头。'
+  - text: 在<code>script</code>的开头添加<code>$&#40;document&#41;.ready<wbr>&#40;function&#40;&#41; {</code>。
    testString: 'assert(code.match(/\$\s*?\(\s*?document\s*?\)\.ready\s*?\(\s*?function\s*?\(\s*?\)\s*?\{/g));'
-  - text: '关闭<code>$(document).ready (function() {</code> function with <code>});</code>'
+  - text: 用<code>}&#41;;</code>闭合<code>$&#40;document&#41;.ready<wbr>&#40;function&#40;&#41; {</code>函数。
    testString: 'assert(code.match(/\n*?\s*?\}\s*?\);/g));'

 ```
@ -35,6 +44,45 @@ tests:
 <div id='html-seed'>

 ```html
+<!-- 请把你的代码写在这行以上 -->
+
+<div class="container-fluid">
+  <h3 class="text-primary text-center">jQuery Playground</h3>
+  <div class="row">
+    <div class="col-xs-6">
+      <h4>#left-well</h4>
+      <div class="well" id="left-well">
+        <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="target3">#target3</button>
+      </div>
+    </div>
+    <div class="col-xs-6">
+      <h4>#right-well</h4>
+      <div class="well" id="right-well">
+        <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="target6">#target6</button>
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+</div>
+
+
+
+</section>
+
+## Solution
+<section id='solution'>
+
+```html
+<script>
+  $(document).ready(function() {
+  });
+</script>
 <!-- Only change code above this line. -->

 <div class="container-fluid">
@ -58,20 +106,6 @@ tests:
    </div>
  </div>
 </div>
-
 ```

-</div>
-
-
-
 </section>
-
-## Solution
-<section id='solution'>
-
-```js
-// solution required
-```
-
-/section>
--- a/curriculum/challenges/chinese/03-front-end-libraries/jquery/remove-an-element-using-jquery.chinese.md
+++ b/curriculum/challenges/chinese/03-front-end-libraries/jquery/remove-an-element-using-jquery.chinese.md
@ -2,15 +2,20 @@
 id: bad87fee1348bd9aed708826
 title: Remove an Element Using jQuery
 challengeType: 6
-videoUrl: ''
+forumTopicId: 18262
 localeTitle: 使用 jQuery 删除元素
 ---

 ## Description
-<section id="description">现在让我们使用jQuery从页面中删除HTML元素。 jQuery有一个名为<code>.remove()</code>的函数，它将完全删除HTML元素。使用<code>.remove()</code>函数从页面中删除元素<code>target4</code> 。 </section>
+<section id='description'>
+现在学习用 jQuery 从页面移除 HTML 标签。
+jQuery 有一个<code>.remove()</code>方法，能完全移除 HTML 标签。
+请用<code>.remove()</code>方法从页面移除<code>target4</code>标签。
+</section>

 ## Instructions
-<section id="instructions">
+<section id='instructions'>
+
 </section>

 ## Tests
@ -18,9 +23,9 @@ localeTitle: 使用jQuery删除元素

 ```yml
 tests:
-  - text: 使用jQuery从页面中删除<code>target4</code>元素。
+  - text: 用 jQuery 从页面中移除<code>target4</code>标签。
    testString: assert($("#target4").length === 0 && code.match(/\$\(["']#target4["']\).remove\(\)/g));
-  - text: 仅使用jQuery删除此元素。
+  - text: 仅用 jQuery 移除该标签。
    testString: assert(code.match(/id="target4/g) && !code.match(/<!--.*id="target4".*-->/g) && $("#right-well").length > 0);

 ```
@ -41,6 +46,49 @@ tests:
  });
 </script>

+<!-- 请修改本行以上的代码 -->
+
+<div class="container-fluid">
+  <h3 class="text-primary text-center">jQuery Playground</h3>
+  <div class="row">
+    <div class="col-xs-6">
+      <h4>#left-well</h4>
+      <div class="well" id="left-well">
+        <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="target3">#target3</button>
+      </div>
+    </div>
+    <div class="col-xs-6">
+      <h4>#right-well</h4>
+      <div class="well" id="right-well">
+        <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="target6">#target6</button>
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+</div>
+
+
+
+</section>
+
+## Solution
+<section id='solution'>
+
+```html
+<script>
+  $(document).ready(function() {
+    $("#target1").css("color", "red");
+    $("#target1").prop("disabled", true);
+    $("#target4").remove();
+  });
+</script>
+
 <!-- Only change code above this line. -->

 <div class="container-fluid">
@ -64,20 +112,6 @@ tests:
    </div>
  </div>
 </div>
-
 ```

-</div>
-
-
-
 </section>
-
-## Solution
-<section id='solution'>
-
-```js
-// solution required
-```
-
-/section>
--- a/curriculum/challenges/chinese/03-front-end-libraries/jquery/remove-classes-from-an-element-with-jquery.chinese.md
+++ b/curriculum/challenges/chinese/03-front-end-libraries/jquery/remove-classes-from-an-element-with-jquery.chinese.md
@ -4,15 +4,21 @@ title: Remove Classes from an Element with jQuery
 required:
  - link: 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.css'
 challengeType: 6
-videoUrl: ''
-localeTitle: 使用jQuery从元素中删除类
+forumTopicId: 18264
+localeTitle: 使用 jQuery 从元素中移除 class
 ---

 ## Description
-<section id="description">以同样的方式，你可以添加类与jQuery的元素<code>addClass()</code>函数，你可以用jQuery的删除它们<code>removeClass()</code>函数。以下是为特定按钮执行此操作的方法： <code>$(&quot;#target2&quot;).removeClass(&quot;btn-default&quot;);</code>让我们从所有<code>button</code>元素中删除<code>btn-default</code>类。 </section>
+<section id='description'>
+和用 jQuery 的<code>addClass()</code>方法给标签添加类一样，也可以利用 jQuery 的<code>removeClass()</code>方法移除他们。
+下面的代码效果是为特定的按钮执行上面的操作：
+<code>$("#target2").removeClass("btn-default");</code>
+请把所有<code>button</code>标签的<code>btn-default</code>类移除。
+</section>

 ## Instructions
-<section id="instructions">
+<section id='instructions'>
+
 </section>

 ## Tests
@ -20,11 +26,11 @@ localeTitle: 使用jQuery从元素中删除类

 ```yml
 tests:
-  - text: 从所有<code>button</code>元素中删除<code>btn-default</code>类。
+  - text: 移除所有的<code>button</code>标签的<code>btn-default</code>属性。
    testString: assert($(".btn-default").length === 0);
-  - text: 仅使用jQuery从元素中删除此类。
+  - text: 仅用 jQuery 从标签中移除类。
    testString: assert(code.match(/btn btn-default/g));
-  - text: 只删除<code>btn-default</code>类。
+  - text: 仅移除<code>btn-default</code>类。
    testString: assert(code.match(/\.[\v\s]*removeClass[\s\v]*\([\s\v]*('|")\s*btn-default\s*('|")[\s\v]*\)/gm));

 ```
@ -46,6 +52,50 @@ tests:
  });
 </script>

+<!-- 请修改本行以上的代码 -->
+
+<div class="container-fluid">
+  <h3 class="text-primary text-center">jQuery Playground</h3>
+  <div class="row">
+    <div class="col-xs-6">
+      <h4>#left-well</h4>
+      <div class="well" id="left-well">
+        <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="target3">#target3</button>
+      </div>
+    </div>
+    <div class="col-xs-6">
+      <h4>#right-well</h4>
+      <div class="well" id="right-well">
+        <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="target6">#target6</button>
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+</div>
+
+
+
+</section>
+
+## Solution
+<section id='solution'>
+
+```html
+<script>
+  $(document).ready(function() {
+    $("button").addClass("animated bounce");
+    $(".well").addClass("animated shake");
+    $("#target3").addClass("animated fadeOut");
+    $("button").removeClass("btn-default");
+  });
+</script>
+
 <!-- Only change code above this line. -->

 <div class="container-fluid">
@ -69,20 +119,6 @@ tests:
    </div>
  </div>
 </div>
-
 ```

-</div>
-
-
-
 </section>
-
-## Solution
-<section id='solution'>
-
-```js
-// solution required
-```
-
-/section>
--- a/curriculum/challenges/chinese/03-front-end-libraries/jquery/target-a-specific-child-of-an-element-using-jquery.chinese.md
+++ b/curriculum/challenges/chinese/03-front-end-libraries/jquery/target-a-specific-child-of-an-element-using-jquery.chinese.md
@ -4,15 +4,23 @@ title: Target a Specific Child of an Element Using jQuery
 required:
  - link: 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.css'
 challengeType: 6
-videoUrl: ''
-localeTitle: 使用jQuery定位元素的特定子元素
+forumTopicId: 18315
+localeTitle: 使用 jQuery 选择元素的特定子元素
 ---

 ## Description
-<section id="description">您已经了解了为什么id属性对于使用jQuery选择器进行定位非常方便。但是你不会总是有这么整洁的ids。幸运的是，jQuery还有一些其他技巧可用于定位正确的元素。 jQuery使用CSS选择器来定位元素。 <code>target:nth-child(n)</code> CSS选择器允许您选择具有目标类或元素类型的所有第n个元素。以下是如何给每个井中的第三个元素提供反弹类： <code>$(&quot;.target:nth-child(3)&quot;).addClass(&quot;animated bounce&quot;);</code>让每个井元素中的第二个孩子反弹。您必须选择具有<code>target</code>类的元素子项。 </section>
+<section id='description'>
+你已经看到了为什么 id 属性对于 jQuery 选择器选取标签非常方便，但这并不适用于所有情景。
+幸运的是，jQuery 有一些其他的方法可以选取正确的标签。
+jQuery 可以用<code>CSS 选择器（CSS Selectors）</code>选取标签。<code>target:nth-child(n)</code>CSS 选择器可以选取所有的第 n 个标签并设置目标属性和目标样式。
+下面的代码展示了给每个区域（well）的第 3 个标签设置<code>bounce</code>类：
+<code>$(".target:nth-child(3)").addClass("animated bounce");</code>
+请给每个区域（well）的第 2 个标签设置<code>bounce</code>类，必须用<code>target</code>类选取标签。
+</section>

 ## Instructions
-<section id="instructions">
+<section id='instructions'>
+
 </section>

 ## Tests
@ -20,13 +28,13 @@ localeTitle: 使用jQuery定位元素的特定子元素

 ```yml
 tests:
-  - text: <code>target</code>元素中的第二个元素应该反弹。
+  - text: <code>target</code>标签中的第二个标签应该有弹性的动画效果。
    testString: assert($(".target:nth-child(2)").hasClass("animated") && $(".target:nth-child(2)").hasClass("bounce"));
-  - text: 只有两个元素应该反弹。
+  - text: 应该仅两个标签有弹性的动画效果。
    testString: assert($(".animated.bounce").length === 2);
-  - text: '您应该使用<code>:nth-child()</code>选择器来修改这些元素。'
+  - text: 应该用<code>&#58;nth-child&#40&#41</code>选择器修改这些标签。
    testString: assert(code.match(/\:nth-child\(/g));
-  - text: 只使用jQuery将这些类添加到元素中。
+  - text: 仅用 jQuery 给标签添加类。
    testString: assert(code.match(/\$\(".target:nth-child\(2\)"\)/g) || code.match(/\$\('.target:nth-child\(2\)'\)/g) || code.match(/\$\(".target"\).filter\(":nth-child\(2\)"\)/g) || code.match(/\$\('.target'\).filter\(':nth-child\(2\)'\)/g));

 ```
@ -52,6 +60,54 @@ tests:
  });
 </script>

+<!-- 请修改本行以上的代码 -->
+
+<div class="container-fluid">
+  <h3 class="text-primary text-center">jQuery Playground</h3>
+  <div class="row">
+    <div class="col-xs-6">
+      <h4>#left-well</h4>
+      <div class="well" id="left-well">
+        <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="target3">#target3</button>
+      </div>
+    </div>
+    <div class="col-xs-6">
+      <h4>#right-well</h4>
+      <div class="well" id="right-well">
+        <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="target6">#target6</button>
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+</div>
+
+
+
+</section>
+
+## Solution
+<section id='solution'>
+
+```html
+<script>
+  $(document).ready(function() {
+    $("#target1").css("color", "red");
+    $("#target1").prop("disabled", true);
+    $("#target4").remove();
+    $("#target2").appendTo("#right-well");
+    $("#target5").clone().appendTo("#left-well");
+    $("#target1").parent().css("background-color", "red");
+    $("#right-well").children().css("color", "orange");
+    $(".target:nth-child(2)").addClass("animated bounce");
+  });
+</script>
+
 <!-- Only change code above this line. -->

 <div class="container-fluid">
@ -75,20 +131,6 @@ tests:
    </div>
  </div>
 </div>
-
 ```

-</div>
-
-
-
 </section>
-
-## Solution
-<section id='solution'>
-
-```js
-// solution required
-```
-
-/section>
--- a/curriculum/challenges/chinese/03-front-end-libraries/jquery/target-elements-by-class-using-jquery.chinese.md
+++ b/curriculum/challenges/chinese/03-front-end-libraries/jquery/target-elements-by-class-using-jquery.chinese.md
@ -4,15 +4,24 @@ title: Target Elements by Class Using jQuery
 required:
  - link: 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.css'
 challengeType: 6
-videoUrl: ''
-localeTitle: 使用jQuery按类目标元素
+forumTopicId: 18316
+localeTitle: 使用 jQuery 配合 class 选择器选择元素
 ---

 ## Description
-<section id="description">您看到我们如何使所有<code>button</code>元素反弹？我们用<code>$(&quot;button&quot;)</code>选择它们，然后我们用<code>.addClass(&quot;animated bounce&quot;);</code>为它们添加了一些CSS类<code>.addClass(&quot;animated bounce&quot;);</code> 。您刚刚使用了jQuery的<code>.addClass()</code>函数，它允许您向元素添加类。首先，让我们使用<code>$(&quot;.well&quot;)</code>选择器将你的<code>div</code>元素与类<code>well</code>对准。请注意，就像CSS声明一样，您键入一个<code>.</code>在课堂名称之前。然后使用jQuery的<code>.addClass()</code>函数中添加类<code>animated</code>和<code>shake</code> 。例如，您可以通过将以下内容添加到<code>document ready function</code>来创建具有类<code>text-primary</code> shake的所有元素： <code>$(&quot;.text-primary&quot;).addClass(&quot;animated shake&quot;);</code> </section>
+<section id='description'>
+我们如何使所有的<code>button</code>标签有弹性的动画效果？我们用<code>$("button")</code>选取所有的<code>button</code>标签，并用<code>.addClass("animated bounce");</code>给其添加一些 CSS 属性。
+jQuery 的<code>.addClass()</code>方法用来给标签添加类。
+首先，我们使用<code>$(".well")</code>选取类为<code>well</code>的<code>div</code>标签。
+值得注意的是，和 CSS 声明一样，在类名前需要添加<code>.</code>。
+然后，用 jQuery 的<code>.addClass()</code>方法添加<code>animated</code>和<code>shake</code>类。
+例如，在<code>document ready function</code>中添加下面的代码，能使所有类为<code>text-primary</code>的标签抖动：
+<code>$(".text-primary").addClass("animated shake");</code>
+</section>

 ## Instructions
-<section id="instructions">
+<section id='instructions'>
+
 </section>

 ## Tests
@ -20,9 +29,9 @@ localeTitle: 使用jQuery按类目标元素

 ```yml
 tests:
-  - text: 使用jQuery <code>addClass()</code>函数为类赋予<code>animated</code>并使用类<code>well</code> <code>shake</code>所有元素。
+  - text: 用 jQuery 的<code>addClass&#40&#41</code>方法给所有类为<code>well</code>的标签添加<code>animated</code>和<code>shake</code>类。
    testString: assert($(".well").hasClass("animated") && $(".well").hasClass("shake"));
-  - text: 只使用jQuery将这些类添加到元素中。
+  - text: 仅用 jQuery 给标签添加类。
    testString: assert(!code.match(/class\.\*animated/g));

 ```
@ -41,6 +50,48 @@ tests:
  });
 </script>

+<!-- 请修改本行以上的代码 -->
+
+<div class="container-fluid">
+  <h3 class="text-primary text-center">jQuery Playground</h3>
+  <div class="row">
+    <div class="col-xs-6">
+      <h4>#left-well</h4>
+      <div class="well" id="left-well">
+        <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="target3">#target3</button>
+      </div>
+    </div>
+    <div class="col-xs-6">
+      <h4>#right-well</h4>
+      <div class="well" id="right-well">
+        <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="target6">#target6</button>
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+</div>
+
+
+
+</section>
+
+## Solution
+<section id='solution'>
+
+```html
+<script>
+  $(document).ready(function() {
+    $("button").addClass("animated bounce");
+    $(".well").addClass("animated shake");
+  });
+</script>
+
 <!-- Only change code above this line. -->

 <div class="container-fluid">
@ -64,20 +115,6 @@ tests:
    </div>
  </div>
 </div>
-
 ```

-</div>
-
-
-
 </section>
-
-## Solution
-<section id='solution'>
-
-```js
-// solution required
-```
-
-/section>
--- a/curriculum/challenges/chinese/03-front-end-libraries/jquery/target-elements-by-id-using-jquery.chinese.md
+++ b/curriculum/challenges/chinese/03-front-end-libraries/jquery/target-elements-by-id-using-jquery.chinese.md
@ -4,15 +4,23 @@ title: Target Elements by id Using jQuery
 required:
  - link: 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.css'
 challengeType: 6
-videoUrl: ''
-localeTitle: id的目标元素使用jQuery
+forumTopicId: 18317
+localeTitle: 使用 jQuery 配合 id 选择器选择元素
 ---

 ## Description
-<section id="description">您还可以通过其id属性来定位元素。首先使用<code>$(&quot;#target3&quot;)</code>选择器将您的<code>button</code>元素与id <code>target3</code> <code>$(&quot;#target3&quot;)</code> 。请注意，就像CSS声明一样，您在id的名称前键入<code>#</code> 。然后使用jQuery的<code>.addClass()</code>函数添加<code>animated</code>类和<code>fadeOut</code> 。以下是如何使用id <code>target6</code>淡出的<code>button</code>元素： <code>$(&quot;#target6&quot;).addClass(&quot;animated fadeOut&quot;)</code> 。 </section>
+<section id='description'>
+你也能通过 id 属性选取标签。
+首先，用<code>$("#target3")</code>选择器选取 id 为<code>target3</code>的<code>button</code>标签。
+注意，和 CSS 属性一样，在 id 名前需要添加<code>#</code>。
+然后，用 jQuery 的<code>.addClass()</code>方法添加<code>animated</code>和<code>fadeOut</code>类。
+下面的代码的效果是使 id 为<code>target6</code>的<code>button</code>标签淡出：
+<code>$("#target6").addClass("animated fadeOut")</code>.
+</section>

 ## Instructions
-<section id="instructions">
+<section id='instructions'>
+
 </section>

 ## Tests
@ -20,11 +28,11 @@ localeTitle: id的目标元素使用jQuery

 ```yml
 tests:
-  - text: 选择<code>id</code>为<code>target3</code>的<code>button</code>元素，并使用jQuery <code>addClass()</code>函数为它提供<code>animated</code>类。
+  - text: 用 jQuery 的<code>addClass&#40&#41</code>方法给<code>id</code>为<code>target3</code>的<code>button</code>标签添加<code>animated</code>类。
    testString: assert($("#target3").hasClass("animated"));
-  - text: 使用id <code>target3</code>定位元素，并使用jQuery <code>addClass()</code>函数为其提供类<code>fadeOut</code> 。
+  - text: 用 jQuery 的<code>addClass&#40&#41</code>方法给<code>id</code>为<code>target3</code>的标签的类添加<code>fadeOut</code>类。
    testString: assert(($("#target3").hasClass("fadeOut") || $("#target3").hasClass("fadeout"))  && code.match(/\$\(\s*.#target3.\s*\)/g));
-  - text: 只使用jQuery将这些类添加到元素中。
+  - text: 仅用 jQuery 给标签设置类。
    testString: assert(!code.match(/class.*animated/g));

 ```
@ -45,6 +53,49 @@ tests:
  });
 </script>

+<!-- 请修改本行以上的代码 -->
+
+<div class="container-fluid">
+  <h3 class="text-primary text-center">jQuery Playground</h3>
+  <div class="row">
+    <div class="col-xs-6">
+      <h4>#left-well</h4>
+      <div class="well" id="left-well">
+        <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="target3">#target3</button>
+      </div>
+    </div>
+    <div class="col-xs-6">
+      <h4>#right-well</h4>
+      <div class="well" id="right-well">
+        <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="target6">#target6</button>
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+</div>
+
+
+
+</section>
+
+## Solution
+<section id='solution'>
+
+```html
+<script>
+  $(document).ready(function() {
+    $("button").addClass("animated bounce");
+    $(".well").addClass("animated shake");
+    $("#target3").addClass("animated fadeOut");
+  });
+</script>
+
 <!-- Only change code above this line. -->

 <div class="container-fluid">
@ -68,20 +119,6 @@ tests:
    </div>
  </div>
 </div>
-
 ```

-</div>
-
-
-
 </section>
-
-## Solution
-<section id='solution'>
-
-```js
-// solution required
-```
-
-/section>
--- a/curriculum/challenges/chinese/03-front-end-libraries/jquery/target-even-elements-using-jquery.chinese.md
+++ b/curriculum/challenges/chinese/03-front-end-libraries/jquery/target-even-elements-using-jquery.chinese.md
@ -4,15 +4,22 @@ title: Target Even Elements Using jQuery
 required:
  - link: 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.css'
 challengeType: 6
-videoUrl: ''
-localeTitle: 使用jQuery定位偶数元素
+forumTopicId: 18318
+localeTitle: 使用 jQuery 选择偶数元素
 ---

 ## Description
-<section id="description">您还可以使用<code>:odd</code>或<code>:even</code>选择器根据位置定位元素。请注意，jQuery是零索引的，这意味着选择中的第一个元素的位置为0.这可能有点令人困惑，因为反直觉地<code>:odd</code>选择第二个元素（位置1），第四个元素（位置3） ， 等等。以下是如何使用类<code>target</code>定位所有奇数元素并给它们类： <code>$(&quot;.target:odd&quot;).addClass(&quot;animated shake&quot;);</code>尝试选择所有偶数<code>target</code>元素，并为它们提供<code>animated</code>和<code>shake</code>类。请记住， <strong>甚至</strong>指的是基于零系统的元素的位置。 </section>
+<section id='description'>
+你也可以用基于位置的<code>:odd</code>和<code>:even</code>选择器选取标签。
+注意，jQuery 是<code>零索引（zero-indexed）</code>的，这意味着第 1 个标签的位置编号是<code>0</code>。这有点混乱和反常——<code>:odd</code>表示选择第 2 个标签（位置编号 1），第 4 个标签（位置编号 3）……等等，以此类推。
+下面的代码展示了选取所有的奇标签并设置类：
+<code>$(".target:odd").addClass("animated shake");</code>
+请尝试选取所有<code>target</code>标签的偶标签并给他们设置<code>animated</code>和<code>shake</code>类。要考虑到<strong>偶（even）</strong>指的是标签位置编号基于<code>0</code>的系统。
+</section>

 ## Instructions
-<section id="instructions">
+<section id='instructions'>
+
 </section>

 ## Tests
@ -20,11 +27,11 @@ localeTitle: 使用jQuery定位偶数元素

 ```yml
 tests:
-  - text: jQuery认为的所有<code>target</code>元素都应该动摇。
+  - text: 所有的<code>target</code>标签应该抖动。
    testString: assert($('.target:even').hasClass('animated') && $('.target:even').hasClass('shake'));
-  - text: '您应该使用<code>:even</code>选择器来修改这些元素。'
+  - text: 应该用<code>&#58;even</code>选择器修改这些标签。
    testString: assert(code.match(/\:even/g));
-  - text: 只使用jQuery将这些类添加到元素中。
+  - text: 仅用 jQuery 给标签添加类。
    testString: assert(code.match(/\$\(".target:even"\)/g) || code.match(/\$\('.target:even'\)/g) || code.match(/\$\(".target"\).filter\(":even"\)/g) || code.match(/\$\('.target'\).filter\(':even'\)/g));

 ```
@ -52,6 +59,56 @@ tests:
  });
 </script>

+<!-- 请修改本行以上的代码 -->
+
+<div class="container-fluid">
+  <h3 class="text-primary text-center">jQuery Playground</h3>
+  <div class="row">
+    <div class="col-xs-6">
+      <h4>#left-well</h4>
+      <div class="well" id="left-well">
+        <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="target3">#target3</button>
+      </div>
+    </div>
+    <div class="col-xs-6">
+      <h4>#right-well</h4>
+      <div class="well" id="right-well">
+        <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="target6">#target6</button>
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+</div>
+
+
+
+</section>
+
+## Solution
+<section id='solution'>
+
+```html
+<script>
+  $(document).ready(function() {
+    $("#target1").css("color", "red");
+    $("#target1").prop("disabled", true);
+    $("#target4").remove();
+    $("#target2").appendTo("#right-well");
+    $("#target5").clone().appendTo("#left-well");
+    $("#target1").parent().css("background-color", "red");
+    $("#right-well").children().css("color", "orange");
+    $("#left-well").children().css("color", "green");
+    $(".target:nth-child(2)").addClass("animated bounce");
+    $(".target:even").addClass("animated shake");
+  });
+</script>
+
 <!-- Only change code above this line. -->

 <div class="container-fluid">
@ -75,20 +132,6 @@ tests:
    </div>
  </div>
 </div>
-
 ```

-</div>
-
-
-
 </section>
-
-## Solution
-<section id='solution'>
-
-```js
-// solution required
-```
-
-/section>
--- a/curriculum/challenges/chinese/03-front-end-libraries/jquery/target-html-elements-with-selectors-using-jquery.chinese.md
+++ b/curriculum/challenges/chinese/03-front-end-libraries/jquery/target-html-elements-with-selectors-using-jquery.chinese.md
@ -4,15 +4,23 @@ title: Target HTML Elements with Selectors Using jQuery
 required:
  - link: 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.css'
 challengeType: 6
-videoUrl: ''
-localeTitle: 使用选择器使用jQuery定位HTML元素
+forumTopicId: 18319
+localeTitle: 使用 jQuery 配合元素选择器选择元素
 ---

 ## Description
-<section id="description">现在我们有一个<code>document ready function</code> 。现在让我们编写第一个jQuery语句。所有jQuery函数都以<code>$</code>开头，通常称为<code>dollar sign operator</code> ，或者作为<code>bling</code> 。 jQuery经常选择带有<code>selector</code>的HTML元素，然后对该元素执行某些操作。例如，让我们使所有<code>button</code>元素反弹。只需在您的文档就绪函数中添加此代码： <code>$(&quot;button&quot;).addClass(&quot;animated bounce&quot;);</code>请注意，我们已经在后台包含了jQuery库和Animate.css库，以便您可以在编辑器中使用它们。所以你使用jQuery将Animate.css <code>bounce</code>类应用于你的<code>button</code>元素。 </section>
+<section id='description'>
+接下来我们学习<code>document ready function</code>。
+首先，我们完成第一个 jQuery 语句。所有的 jQuery 函数以<code>$</code>开头，这个符号通常被称为<code>美元符号（dollar sign operator）</code>或<code>bling</code>。
+jQuery 通常选取并操作带有<code>选择器（selector）</code>的 HTML 标签。
+例如，如果要所有<code>button</code>有弹性的动画效果，只需在<code>document ready function</code>中添加如下代码即可：
+<code>$("button").addClass("animated bounce");</code>
+请注意，为了能在编辑器里直接使用，我们已经为你在后台引入了 jQuery 库和 Animate.css 库。因此，你只需要通过 jQuery 给<code>button</code>元素添加<code>bounce</code>类就可以了。
+</section>

 ## Instructions
-<section id="instructions">
+<section id='instructions'>
+
 </section>

 ## Tests
@ -20,11 +28,11 @@ localeTitle: 使用选择器使用jQuery定位HTML元素

 ```yml
 tests:
-  - text: 使用jQuery <code>addClass()</code>函数将类<code>animated</code>并<code>bounce</code>回到<code>button</code>元素。
+  - text: 用 jQuery 的<code>addClass&#40&#41</code>方法给<code>button</code>标签添加<code>animated</code>和<code>bounce</code>类。
    testString: 'assert($("button").hasClass("animated") && $("button").hasClass("bounce"));'
-  - text: 只使用jQuery将这些颜色添加到元素中。
+  - text: 仅用 jQuery 给标签添加颜色。
    testString: 'assert(!code.match(/class.*animated/g));'
-  - text: 你的jQuery代码应该在<code>$(document).ready();</code>功能。
+  - text: jQuery 代码应该放在<code>$(document).ready();</code>函数里。
    testString: assert(code.match(/\$\(document\)\.ready\(function.*(\s|\n)*.*button.*.addClass.*\);/g));

 ```
@ -43,6 +51,47 @@ tests:
  });
 </script>

+<!-- 请修改本行以上的代码 -->
+
+<div class="container-fluid">
+  <h3 class="text-primary text-center">jQuery Playground</h3>
+  <div class="row">
+    <div class="col-xs-6">
+      <h4>#left-well</h4>
+      <div class="well" id="left-well">
+        <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="target3">#target3</button>
+      </div>
+    </div>
+    <div class="col-xs-6">
+      <h4>#right-well</h4>
+      <div class="well" id="right-well">
+        <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="target6">#target6</button>
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+</div>
+
+
+
+</section>
+
+## Solution
+<section id='solution'>
+
+```html
+<script>
+  $(document).ready(function() {
+    $("button").addClass("animated bounce");
+  });
+</script>
+
 <!-- Only change code above this line. -->

 <div class="container-fluid">
@ -66,20 +115,6 @@ tests:
    </div>
  </div>
 </div>
-
 ```

-</div>
-
-
-
 </section>
-
-## Solution
-<section id='solution'>
-
-```js
-// solution required
-```
-
-/section>
--- a/curriculum/challenges/chinese/03-front-end-libraries/jquery/target-the-children-of-an-element-using-jquery.chinese.md
+++ b/curriculum/challenges/chinese/03-front-end-libraries/jquery/target-the-children-of-an-element-using-jquery.chinese.md
@ -2,26 +2,33 @@
 id: bad87fee1348bd9aed208826
 title: Target the Children of an Element Using jQuery
 challengeType: 6
-videoUrl: ''
-localeTitle: 使用jQuery定位元素的子元素
+forumTopicId: 18320
+localeTitle: 使用 jQuery 选择元素的子元素
 ---

 ## Description
-<section id="description">当HTML元素放在另一个下面时，它们被称为该元素的<code>children</code>元素。例如，在与文本“＃Target1时”，“＃TARGET2”，和“＃target3”这一挑战的按钮元件都是<code>children</code>的的<code>&lt;div class=&quot;well&quot; id=&quot;left-well&quot;&gt;</code>元素。 jQuery有一个名为<code>children()</code>的函数，允许您访问您选择的元素的子元素。下面是一个示例，说明如何使用<code>children()</code>函数为<code>left-well</code>元素的子项设置<code>blue</code> ： <code>$(&quot;#left-well&quot;).children().css(&quot;color&quot;, &quot;blue&quot;)</code> </section>
+<section id='description'>
+把 HTML 标签放到另一个级别的标签里，这些 HTML 标签被称为该标签的<code>子标签（children element）</code>。例如，本次挑战中文本为 "#target1"、"#target2" 和 "#target3" 的按钮都是<code>&#60;div class="well" id="left-well"&#62;</code>标签的<code>子标签</code>。
+jQuery 有一个<code>children()</code>方法，可以访问被选取标签的子标签。
+下面的代码展示了用<code>children()</code>方法把<code>left-well</code>标签的子标签的颜色设置成<code>蓝色（blue）</code>：
+<code>$("#left-well").children().css("color", "blue")</code>
+</section>

 ## Instructions
-<section id="instructions">给你的<code>right-well</code>元素的所有孩子颜色为橙色。 </section>
+<section id='instructions'>
+请把<code>right-well</code>标签的所有子标签颜色设置成<code>橙色（orange）</code>。
+</section>

 ## Tests
 <section id='tests'>

 ```yml
 tests:
-  - text: '<code>#right-well</code>所有孩子都应该有橙色文字。'
+  - text: <code>#right-well</code>所有的子标签文本应该是橙色。
    testString: assert($("#right-well").children().css("color") === 'rgb(255, 165, 0)');
-  - text: 您应该使用<code>children()</code>函数来修改这些元素。
+  - text: 应该用<code>children&#40&#41</code>方法修改标签。
    testString: assert(code.match(/\.children\(\)\.css/g));
-  - text: 只使用jQuery将这些类添加到元素中。
+  - text: 仅用 jQuery 给标签添加类。
    testString: assert(code.match(/<div class="well" id="right-well">/g));

 ```
@ -46,6 +53,53 @@ tests:
  });
 </script>

+<!-- 请修改本行以上的代码 -->
+
+<div class="container-fluid">
+  <h3 class="text-primary text-center">jQuery Playground</h3>
+  <div class="row">
+    <div class="col-xs-6">
+      <h4>#left-well</h4>
+      <div class="well" id="left-well">
+        <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="target3">#target3</button>
+      </div>
+    </div>
+    <div class="col-xs-6">
+      <h4>#right-well</h4>
+      <div class="well" id="right-well">
+        <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="target6">#target6</button>
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+</div>
+
+
+
+</section>
+
+## Solution
+<section id='solution'>
+
+```html
+<script>
+  $(document).ready(function() {
+    $("#target1").css("color", "red");
+    $("#target1").prop("disabled", true);
+    $("#target4").remove();
+    $("#target2").appendTo("#right-well");
+    $("#target5").clone().appendTo("#left-well");
+    $("#target1").parent().css("background-color", "red");
+    $("#right-well").children().css("color", "orange");
+  });
+</script>
+
 <!-- Only change code above this line. -->

 <div class="container-fluid">
@ -69,20 +123,7 @@ tests:
    </div>
  </div>
 </div>
-
 ```

-</div>
-
-
-
 </section>

-## Solution
-<section id='solution'>
-
-```js
-// solution required
-```
-
-/section>
--- a/curriculum/challenges/chinese/03-front-end-libraries/jquery/target-the-parent-of-an-element-using-jquery.chinese.md
+++ b/curriculum/challenges/chinese/03-front-end-libraries/jquery/target-the-parent-of-an-element-using-jquery.chinese.md
@ -2,15 +2,23 @@
 id: bad87fee1348bd9aed308826
 title: Target the Parent of an Element Using jQuery
 challengeType: 6
-videoUrl: ''
-localeTitle: 使用jQuery定位元素的父级
+forumTopicId: 18321
+localeTitle: 使用 jQuery 选择元素的父元素
 ---

 ## Description
-<section id="description">每个HTML元素都有一个<code>parent</code>元素，它从中<code>inherits</code>属性。例如，您的<code>jQuery Playground</code> <code>h3</code>元素具有<code>&lt;div class=&quot;container-fluid&quot;&gt;</code>的父元素，它本身具有父<code>body</code> 。 jQuery有一个名为<code>parent()</code>的函数，允许您访问您选择的任何元素的父级。下面是一个如何使用<code>parent()</code>函数的例子，如果你想给<code>left-well</code>元素的父元素一个蓝色的背景颜色： <code>$(&quot;#left-well&quot;).parent().css(&quot;background-color&quot;, &quot;blue&quot;)</code>为<code>#target1</code>元素的父级<code>#target1</code>背景颜色为红色。 </section>
+<section id='description'>
+每个 HTML 标签都默认<code>继承（inherits）</code>其<code>父标签（parent element）</code>的 CSS 属性。
+例如，<code>h3</code>标签<code>jQuery Playground</code>的父标签是<code>&#60;div class="container-fluid"&#62</code>，<code>&#60;div class="container-fluid"&#62</code>的父标签是<code>body</code>。
+jQuery 有一个<code>parent()</code>方法，可以访问被选取标签的父标签。
+下面的代码展示了使用<code>parent()</code>方法把<code>left-well</code>标签的父标签背景色设置成<code>蓝色（blue）</code>的方式：
+<code>$("#left-well").parent().css("background-color", "blue")</code>
+请把<code>#target1</code>标签的父标签背景色设置成<code>红色（red）</code>。
+</section>

 ## Instructions
-<section id="instructions">
+<section id='instructions'>
+
 </section>

 ## Tests
@ -18,13 +26,13 @@ localeTitle: 使用jQuery定位元素的父级

 ```yml
 tests:
-  - text: 你的<code>left-well</code>元素应该有红色背景。
+  - text: <code>left-well</code>标签应该有红色的背景。
    testString: assert($("#left-well").css("background-color") === 'red' || $("#left-well").css("background-color") === 'rgb(255, 0, 0)' || $("#left-well").css("background-color").toLowerCase() === '#ff0000' || $("#left-well").css("background-color").toLowerCase() === '#f00');
-  - text: 您应该使用<code>.parent()</code>函数来修改此元素。
+  - text: 应该用<code>&#46;parent&#40;&#41;</code>方法修改该标签。
    testString: assert(code.match(/\.parent\s*\(\s*\)\s*\.css/g));
-  - text: '应该在<code>#target1</code>元素上调用<code>.parent()</code>方法。'
+  - text: 应该在<code>&#35;target1</code>标签上调用<code>&#46;parent&#40;&#41;</code>方法。
    testString: assert(code.match(/\$\s*?\(\s*?(?:'|")\s*?#target1\s*?(?:'|")\s*?\)\s*?\.parent/gi));
-  - text: 只使用jQuery将这些类添加到元素中。
+  - text: 仅用 jQuery 给标签添加类。
    testString: assert(code.match(/<div class="well" id="left-well">/g));

 ```
@ -48,6 +56,54 @@ tests:
  });
 </script>

+<!-- 请修改本行以上的代码 -->
+
+<body>
+  <div class="container-fluid">
+    <h3 class="text-primary text-center">jQuery Playground</h3>
+    <div class="row">
+      <div class="col-xs-6">
+        <h4>#left-well</h4>
+        <div class="well" id="left-well">
+          <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="target3">#target3</button>
+        </div>
+      </div>
+      <div class="col-xs-6">
+        <h4>#right-well</h4>
+        <div class="well" id="right-well">
+          <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="target6">#target6</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
+```
+
+</div>
+
+
+
+</section>
+
+## Solution
+<section id='solution'>
+
+```html
+<script>
+  $(document).ready(function() {
+    $("#target1").css("color", "red");
+    $("#target1").prop("disabled", true);
+    $("#target4").remove();
+    $("#target2").appendTo("#right-well");
+    $("#target5").clone().appendTo("#left-well");
+    $("#target1").parent().css("background-color", "red");
+  });
+</script>
+
 <!-- Only change code above this line. -->

 <body>
@ -73,20 +129,7 @@ tests:
    </div>
  </div>
 </body>
-
 ```

-</div>
-
-
-
 </section>

-## Solution
-<section id='solution'>
-
-```js
-// solution required
-```
-
-/section>
--- a/curriculum/challenges/chinese/03-front-end-libraries/jquery/target-the-same-element-with-multiple-jquery-selectors.chinese.md
+++ b/curriculum/challenges/chinese/03-front-end-libraries/jquery/target-the-same-element-with-multiple-jquery-selectors.chinese.md
@ -4,15 +4,24 @@ title: Target the Same Element with Multiple jQuery Selectors
 required:
  - link: 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.css'
 challengeType: 6
-videoUrl: ''
-localeTitle: 使用多个jQuery选择器定位相同的元素
+forumTopicId: 18322
+localeTitle: 用多个 jQuery 选择器选择同一个元素
 ---

 ## Description
-<section id="description">现在你知道三种定位元素的方法：按类型： <code>$(&quot;button&quot;)</code> ，按类： <code>$(&quot;.btn&quot;)</code>和id <code>$(&quot;#target1&quot;)</code> 。虽然可以在单个<code>.addClass()</code>调用中添加多个类，但是让我们以<em>三种不同的方式</em>将它们添加到同一个元素中。使用<code>.addClass()</code> ，一次只向同一个元素添加一个类，有三种不同的方式：使用类型<code>button</code>将<code>animated</code>类添加到所有元素。使用类<code>.btn</code>将<code>shake</code>类添加到所有按钮。将<code>btn-primary</code>类添加到id为<code>#target1</code>的按钮。 <strong>注意</strong> <br>您应该只定位一个元素，一次只添加一个类。总而言之，您的三个选择器最终会将三个类<code>shake</code> ， <code>animated</code>和<code>btn-primary</code>到<code>#target1</code> 。 </section>
+<section id='description'>
+现在你知道三种选取标签的方法：用标签选择器，如<code>$("button")</code>；用类选择器，<code>$(".btn")</code>以及用 id 选择器，<code>$("#target1")</code>。
+虽然可以在单个<code>.addClass()</code>内添加多个类，但是我们可以用<em>三种不同的方式</em>给一种标签添加类。
+以三种不同的方式用<code>.addClass()</code>方法每次只给一种标签添加一个类：
+给所有的<code>button</code>标签添加<code>animated</code>类。
+给所有类为<code>.btn</code>的<code>button</code>标签添加<code>shake</code>类。
+给所有 id 为<code>#target1</code>的<code>button</code>标签添加<code>btn-primary</code>类。
+<strong>注意：</strong><br>虽然三个选择器最终给 id 为<code>#target1</code>的<code>button</code>标签添加<code>shake</code>、<code>animated</code>和<code>btn-primary</code>等三个类，但是你需要用且仅用三种不同的选择器给三种标签各添加一个类（译者注：所谓的“一种标签”是指他们有某种共同的特点，如包含同一个 class）。
+</section>

 ## Instructions
-<section id="instructions">
+<section id='instructions'>
+
 </section>

 ## Tests
@ -20,17 +29,17 @@ localeTitle: 使用多个jQuery选择器定位相同的元素

 ```yml
 tests:
-  - text: 使用<code>$(&quot;button&quot;)</code>选择器。
+  - text: "用<code>$&#40'button'&#41</code>选择标签。"
    testString: assert(code.match(/\$\s*?\(\s*?(?:'|")\s*?button\s*?(?:'|")/gi));
-  - text: 使用<code>$(&quot;.btn&quot;)</code>选择器。
+  - text: "用<code>$&#40'.btn'&#41</code>选择标签。"
    testString: assert(code.match(/\$\s*?\(\s*?(?:'|")\s*?\.btn\s*?(?:'|")/gi));
-  - text: '使用<code>$(&quot;#target1&quot;)</code>选择器。'
+  - text: "用<code>$&#40'#target1'&#41</code>选择标签。"
    testString: assert(code.match(/\$\s*?\(\s*?(?:'|")\s*?#target1\s*?(?:'|")/gi));
-  - text: 只为每个三个选择器添加一个类。
+  - text: 三个选择器每个只添加一个类。
    testString: assert(code.match(/addClass/g) && code.match(/addClass\s*?\(\s*?('|")\s*?[\w-]+\s*?\1\s*?\)/g).length > 2);
-  - text: '你的<code>#target1</code>元素应该有<code>animated</code>类， <code>shake</code>和<code>btn-primary</code> 。'
+  - text: <code>#target1</code>标签应具有<code>animated</code>、<code>shake</code>和<code>btn-primary</code>三个类。
    testString: assert($('#target1').hasClass('animated') && $('#target1').hasClass('shake') && $('#target1').hasClass('btn-primary'));
-  - text: 只使用jQuery将这些类添加到元素中。
+  - text: 仅用 jQuery 给标签添加类。
    testString: assert(!code.match(/class.*animated/g));

 ```
@ -49,6 +58,49 @@ tests:
  });
 </script>

+<!-- 请修改本行以上的代码 -->
+
+<div class="container-fluid">
+  <h3 class="text-primary text-center">jQuery Playground</h3>
+  <div class="row">
+    <div class="col-xs-6">
+      <h4>#left-well</h4>
+      <div class="well" id="left-well">
+        <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="target3">#target3</button>
+      </div>
+    </div>
+    <div class="col-xs-6">
+      <h4>#right-well</h4>
+      <div class="well" id="right-well">
+        <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="target6">#target6</button>
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+</div>
+
+
+
+</section>
+
+## Solution
+<section id='solution'>
+
+```html
+<script>
+  $(document).ready(function() {
+    $("button").addClass("animated");
+    $(".btn").addClass("shake");
+    $("#target1").addClass("btn-primary");
+  });
+</script>
+
 <!-- Only change code above this line. -->

 <div class="container-fluid">
@ -72,20 +124,7 @@ tests:
    </div>
  </div>
 </div>
-
 ```

-</div>
-
-
-
 </section>

-## Solution
-<section id='solution'>
-
-```js
-// solution required
-```
-
-/section>
--- a/curriculum/challenges/chinese/03-front-end-libraries/jquery/use-appendto-to-move-elements-with-jquery.chinese.md
+++ b/curriculum/challenges/chinese/03-front-end-libraries/jquery/use-appendto-to-move-elements-with-jquery.chinese.md
@ -2,15 +2,22 @@
 id: bad87fee1348bd9aed608826
 title: Use appendTo to Move Elements with jQuery
 challengeType: 6
-videoUrl: ''
-localeTitle: 使用appendTo使用jQuery移动元素
+forumTopicId: 18340
+localeTitle: 使用 jQuery 的 appendTo 方法移动元素
 ---

 ## Description
-<section id="description">现在让我们尝试将元素从一个<code>div</code>移动到另一个<code>div</code> 。 jQuery有一个名为<code>appendTo()</code>的函数，它允许您选择HTML元素并将它们附加到另一个元素。例如，如果我们想将<code>target4</code>从我们的右井移动到我们的左井，我们将使用： <code>$(&quot;#target4&quot;).appendTo(&quot;#left-well&quot;);</code>将<code>target2</code>元素从<code>left-well</code>到<code>right-well</code> 。 </section>
+<section id='description'>
+现在我们学习把标签从一个<code>div</code>移动到另一个<code>div</code>。
+jQuery 有一个<code>appendTo()</code>方法，可以选取 HTML 标签并将其添加到另一个标签里面。
+例如，如果要把<code>target4</code>从右框移到左框，可以设置如下：
+<code>$("#target4").appendTo("#left-well");</code>
+请把<code>target2</code>标签从<code>left-well</code>移动到<code>right-well</code>。
+</section>

 ## Instructions
-<section id="instructions">
+<section id='instructions'>
+
 </section>

 ## Tests
@ -18,11 +25,11 @@ localeTitle: 使用appendTo使用jQuery移动元素

 ```yml
 tests:
-  - text: 您的<code>target2</code>元素不应位于<code>left-well</code> 。
+  - text: <code>target2</code>标签应该不在<code>left-well</code>内。
    testString: assert($("#left-well").children("#target2").length === 0);
-  - text: 你的<code>target2</code>元素应该在你的<code>right-well</code> 。
+  - text: <code>target2</code>标签应该在<code>right-well</code>内。
    testString: assert($("#right-well").children("#target2").length > 0);
-  - text: 只使用jQuery来移动这些元素。
+  - text: 仅用 jQuery 移动这些标签。
    testString: assert(!code.match(/class.*animated/g));

 ```
@ -44,6 +51,50 @@ tests:
  });
 </script>

+<!-- 请修改本行以上的代码 -->
+
+<div class="container-fluid">
+  <h3 class="text-primary text-center">jQuery Playground</h3>
+  <div class="row">
+    <div class="col-xs-6">
+      <h4>#left-well</h4>
+      <div class="well" id="left-well">
+        <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="target3">#target3</button>
+      </div>
+    </div>
+    <div class="col-xs-6">
+      <h4>#right-well</h4>
+      <div class="well" id="right-well">
+        <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="target6">#target6</button>
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+</div>
+
+
+
+</section>
+
+## Solution
+<section id='solution'>
+
+```html
+<script>
+  $(document).ready(function() {
+    $("#target1").css("color", "red");
+    $("#target1").prop("disabled", true);
+    $("#target4").remove();
+    $("#target2").appendTo("#right-well");
+  });
+</script>
+
 <!-- Only change code above this line. -->

 <div class="container-fluid">
@ -67,20 +118,7 @@ tests:
    </div>
  </div>
 </div>
-
 ```

-</div>
-
-
-
 </section>

-## Solution
-<section id='solution'>
-
-```js
-// solution required
-```
-
-/section>
--- a/curriculum/challenges/chinese/03-front-end-libraries/jquery/use-jquery-to-modify-the-entire-page.chinese.md
+++ b/curriculum/challenges/chinese/03-front-end-libraries/jquery/use-jquery-to-modify-the-entire-page.chinese.md
@ -4,15 +4,21 @@ title: Use jQuery to Modify the Entire Page
 required:
  - link: 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.css'
 challengeType: 6
-videoUrl: ''
+forumTopicId: 18361
 localeTitle: 使用 jQuery 修改整个页面
 ---

 ## Description
-<section id="description">我们玩完了jQuery游乐场。让我们把它撕下来！ jQuery也可以定位<code>body</code>元素。以下是我们如何使整个身体淡出： <code>$(&quot;body&quot;).addClass(&quot;animated fadeOut&quot;);</code>但是，让我们做一些更具戏剧性的事情。将<code>animated</code>类和<code>hinge</code>添加到您的<code>body</code>元素中。 </section>
+<section id='description'>
+jQuery 的学习到这里就告一段落了，现在我们来试一试让元素消失的特效。
+jQuery 也能选取<code>body</code>标签。
+后面的代码效果是使整个<code>body</code>标签淡出：<code> $("body").addClass("animated fadeOut");</code>
+接下来我们做一些更有戏剧性的事：给<code>body</code>标签添加<code>animated</code>和<code>hinge</code>类。
+</section>

 ## Instructions
-<section id="instructions">
+<section id='instructions'>
+
 </section>

 ## Tests
@ -20,7 +26,7 @@ localeTitle: 使用jQuery修改整个页面

 ```yml
 tests:
-  - text: 将<code>animated</code>类和<code>hinge</code>添加到您的<code>body</code>元素中。
+  - text: 给<code>body</code>标签添加<code>animated</code>和<code>hinge</code>类。
    testString: assert($('body').hasClass('animated') && $('body').hasClass('hinge'));

 ```
@ -49,6 +55,57 @@ tests:
  });
 </script>

+<!-- 请修改本行以上的代码 -->
+
+<div class="container-fluid">
+  <h3 class="text-primary text-center">jQuery Playground</h3>
+  <div class="row">
+    <div class="col-xs-6">
+      <h4>#left-well</h4>
+      <div class="well" id="left-well">
+        <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="target3">#target3</button>
+      </div>
+    </div>
+    <div class="col-xs-6">
+      <h4>#right-well</h4>
+      <div class="well" id="right-well">
+        <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="target6">#target6</button>
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+</div>
+
+
+
+</section>
+
+## Solution
+<section id='solution'>
+
+```html
+<script>
+  $(document).ready(function() {
+    $("#target1").css("color", "red");
+    $("#target1").prop("disabled", true);
+    $("#target4").remove();
+    $("#target2").appendTo("#right-well");
+    $("#target5").clone().appendTo("#left-well");
+    $("#target1").parent().css("background-color", "red");
+    $("#right-well").children().css("color", "orange");
+    $("#left-well").children().css("color", "green");
+    $(".target:nth-child(2)").addClass("animated bounce");
+    $(".target:even").addClass("animated shake");
+    $("body").addClass("animated hinge");
+  });
+</script>
+
 <!-- Only change code above this line. -->

 <div class="container-fluid">
@ -72,20 +129,7 @@ tests:
    </div>
  </div>
 </div>
-
 ```

-</div>
-
-
-
 </section>

-## Solution
-<section id='solution'>
-
-```js
-// solution required
-```
-
-/section>