freeCodeCamp/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/give-each-element-a-unique-...

81 lines
3.1 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

---
id: bad87fee1348bd9aec908855
title: Give Each Element a Unique id
challengeType: 0
videoUrl: ''
localeTitle: 为每个元素赋予唯一ID
---
## Description
<section id="description">我们还希望能够使用jQuery通过其唯一ID来定位每个按钮。每个按钮提供一个唯一的ID<code>target1</code> ,结束时用<code>target6</code> 。确保<code>target1</code><code>target3</code><code>#left-well</code> ,而<code>target4</code><code>target6</code><code>#right-well</code></section>
## Instructions
<section id="instructions">
</section>
## Tests
<section id='tests'>
```yml
tests:
- text: 一个<code>button</code>元素应该具有id <code>target1</code> 。
testString: 'assert($("#left-well").children("#target1") && $("#left-well").children("#target1").length > 0, "One <code>button</code> element should have the id <code>target1</code>.");'
- text: 一个<code>button</code>元素应该具有id <code>target2</code> 。
testString: 'assert($("#left-well").children("#target2") && $("#left-well").children("#target2").length > 0, "One <code>button</code> element should have the id <code>target2</code>.");'
- text: 一个<code>button</code>元素应该具有id <code>target3</code> 。
testString: 'assert($("#left-well").children("#target3") && $("#left-well").children("#target3").length > 0, "One <code>button</code> element should have the id <code>target3</code>.");'
- text: 一个<code>button</code>元素应该具有id <code>target4</code> 。
testString: 'assert($("#right-well").children("#target4") && $("#right-well").children("#target4").length > 0, "One <code>button</code> element should have the id <code>target4</code>.");'
- text: 一个<code>button</code>元素应该具有id <code>target5</code> 。
testString: 'assert($("#right-well").children("#target5") && $("#right-well").children("#target5").length > 0, "One <code>button</code> element should have the id <code>target5</code>.");'
- text: 一个<code>button</code>元素应该具有id <code>target6</code> 。
testString: 'assert($("#right-well").children("#target6") && $("#right-well").children("#target6").length > 0, "One <code>button</code> element should have the id <code>target6</code>.");'
```
</section>
## Challenge Seed
<section id='challengeSeed'>
<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"></button>
<button class="btn btn-default target"></button>
<button class="btn btn-default target"></button>
</div>
</div>
<div class="col-xs-6">
<h4>#right-well</h4>
<div class="well" id="right-well">
<button class="btn btn-default target"></button>
<button class="btn btn-default target"></button>
<button class="btn btn-default target"></button>
</div>
</div>
</div>
</div>
```
</div>
</section>
## Solution
<section id='solution'>
```js
// solution required
```
</section>