Question

你可以从我的代码中看出来。我对此非常陌生，请尽量保持简单的答案。

分配是为了使输入的任何名称以大写形式返回，我做了。

但我希望所有内容都以大写字母显示，包括名称和段落。我已经尝试了所有我能想到的东西，我觉得这很简单。

这是我到目前为止所做的：

$(document).ready(function() {
  $("#letter form").submit(function(event) {
  var nameInput = $("input#name").val().toUpperCase();

  $(".name1").text(nameInput);
  $("#response").show();


  event.preventDefault();

  });
});

#response {
  display: none;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!--link href="css/styles.css" rel="stylesheet" type="text/css"-->


<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!--script src="js/scripts.js"></script-->

<div class="container">
<h1>Fill in the blanks to write your story!</h1>
<div id="letter">
 <form>
   <div class="form-group">
     <label for="name">A name</label>
     <input id="name" class="form-control" type="text">
   </div>

   <button type="submit" class="btn">Show me the response</button>
 </form>
</div>

<div id="response">
 <h1>A fantastical adventure</h1>
 <blockquote>
 <p><span class="name1"></span>, Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</blockquote>
</div>
</div>

Answer 1

假设您想要所有<p>个标记，jQuery selectors遵循与CSS选择器相同的规则。考虑到这一点，您可以使用jQuery .text()获取innerText：

// Select ALL p tags, and set their text to upper case
$('p').text($('p').text().toUpperCase());

如果您希望它专门针对包含类name1的子项的第一个父段落，我们可以使用与jQuery .closest()类似的想法：

// Split into a var to help readability
// Grab the "closest ancestor" (get the first parent that is a p)
var closestP = $('.name1').closest('p');
closestP.text(closestP.text().toUpperCase());

我希望这是你正在寻找的东西！

编辑：另一种需要为特定p编辑html的方法：

<强> HTML

<div id="response">
   <h1>A fantastical adventure</h1>
   <blockquote>
   <p id="toCapital"><span class="name1"></span>, Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </blockquote>
 </div>

<强>的jQuery

$('#toCapital').text($('#toCapital').text().toUpperCase());

这里我使用了与第一个示例类似的想法，除了不选择所有段落标记，我向现有的一个添加id，选择它，然后修改文本。

您还可以进行更高级的选择，但如果您事先添加，则不会选择想要大写的相同段落：

var first = $('p').first();
first.text(first.text().toUpperCase());

我确定你可以看到我在哪里使用这些，关键是要考虑如何识别你想要改变的东西，起初它很棘手，但它变得更容易当您开始了解name，class，id之间的差异，以及其他属性以及如何将它们组合以创建独特的组合时。

Answer 2

将所有响应设为大写：

$("#response").html($("#response").html().toUpperCase());

.html()设置并返回所选元素的所有文本和标记...
它位于最大容器$("#response")上，您必须应用toUpperCase()方法。

见下文：

$(document).ready(function() {
  
  $("#letter form").submit(function(event) {
    event.preventDefault();
    var nameInput = $("input#name").val().toUpperCase();
    $(".name1").text(nameInput);

    $("#response").html($("#response").html().toUpperCase());
    $("#response").show();

  });
});

#response {
  display: none;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!--link href="css/styles.css" rel="stylesheet" type="text/css"-->



<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!--script src="js/scripts.js"></script-->

<div class="container">
<h1>Fill in the blanks to write your story!</h1>
<div id="letter">
 <form>
   <div class="form-group">
     <label for="name">A name</label>
     <input id="name" class="form-control" type="text">
   </div>

   <button type="submit" class="btn">Show me the response</button>
 </form>
</div>

<div id="response">
 <h1>A fantastical adventure</h1>
 <blockquote>
 <p><span class="name1"></span>, Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</blockquote>
</div>
</div>

使用toUpperCase方法使p元素以大写形式显示

2 个答案: