freeCodeCamp

4.6 KiB

Raw Blame History

id	title	challengeType	videoUrl	localeTitle
564944c91be2204b269d51e3	Change Text Inside an Element Using jQuery	6		Изменение текста внутри элемента с помощью jQuery

Description

Используя jQuery, вы можете изменить текст между начальным и конечным тегами элемента. Вы даже можете изменить разметку HTML. В jQuery есть функция, называемая .html() которая позволяет добавлять HTML-теги и текст внутри элемента. Любое содержимое, ранее содержавшееся в элементе, будет полностью заменено содержимым, которое вы предоставляете, используя эту функцию. Вот как вы могли бы переписать и подчеркнуть текст нашего заголовка: $("h3").html("jQuery Playground"); jQuery также имеет аналогичную функцию под названием .text() которая изменяет текст без добавления тегов. Другими словами, эта функция не будет оценивать любые теги HTML, переданные ей, но вместо этого будет рассматривать ее как текст, который вы хотите заменить существующим контентом. Измените кнопку с id target4 , выделив ее текст. Проверьте эту ссылку, чтобы узнать больше о различии между  и  и их использованием. Обратите внимание, что, хотя  традиционно используется для подчеркивания текста, с тех пор он был использован для использования в качестве тега для значков. Тег  теперь широко признан тегом для акцента. Либо будет работать для этой задачи.

Instructions

Tests

tests:
  - text: 'Подчеркните текст в кнопке <code>target4</code> , добавив теги HTML.'
    testString: 'assert.isTrue((/<em>|<i>\s*#target4\s*<\/em>|<\/i>/gi).test($("#target4").html()), "Emphasize the text in your <code>target4</code> button by adding HTML tags.");'
  - text: ''
    testString: 'assert($("#target4") && $("#target4").text().trim() === "#target4", "Make sure the text is otherwise unchanged.");'
  - text: ''
    testString: 'assert.isFalse((/<em>|<i>/gi).test($("h3").html()), "Do not alter any other text.");'
  - text: ''
    testString: 'assert(code.match(/\.html\(/g), "Make sure you are using <code>.html()</code> and not <code>.text()</code>.");'
  - text: ''
    testString: 'assert(code.match(/\$\(\s*?(\"|\")#target4(\"|\")\s*?\)\.html\(/), "Make sure to select <code>button id="target4"</code> with jQuery.");'

Challenge Seed

<script>
  $(document).ready(function() {
    $("#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>

Solution

// solution required

4.6 KiB Raw Blame History Unescape Escape