freeCodeCamp

4.2 KiB

Raw Blame History

id	title	challengeType	videoUrl	localeTitle
564944c91be2204b269d51e3	Change Text Inside an Element Using jQuery	6

Description

باستخدام jQuery ، يمكنك تغيير النص بين علامات البداية والنهاية للعنصر. يمكنك حتى تغيير ترميز HTML. يحتوي jQuery على وظيفة تسمى .html() تسمح لك بإضافة علامات HTML ونص داخل عنصر. سيتم استبدال أي محتوى سابق داخل العنصر تمامًا بالمحتوى الذي تقدمه باستخدام هذه الوظيفة. فيما يلي كيفية كتابة نص عنواننا والتأكيد عليه: $("h3").html("jQuery Playground"); يحتوي jQuery أيضًا على دالة مشابهة تُسمى .text() تقوم فقط بتغيير النص دون إضافة علامات. بمعنى آخر ، لن تقوم هذه الوظيفة بتقييم أية علامات HTML تم تمريرها إليها ، ولكن بدلاً من ذلك ستعاملها على أنها النص الذي تريد استبدال المحتوى الموجود به. تغيير الزر مع معرف target4 بواسطة التأكيد على النص الخاص به. تحقق هذا الرابط لمعرفة المزيد حول الفرق بين  و  واستخداماتها. لاحظ أنه في حين تم استخدام العلامة  للتأكيد على النص ، فقد تم استخدامه منذ ذلك الحين كعلامة للأيقونات. أصبحت العلامة  الآن مقبولة على نطاق واسع كعلامة للتأكيد. إما أن تعمل من أجل هذا التحدي.

Instructions

Tests

tests:
  - text: قم <code>target4</code> النص الموجود في الزر <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: تأكد من أنك تستخدم <code>.html()</code> وليس <code>.text()</code> .
    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.2 KiB Raw Blame History