使用toUpperCase方法使p元素以大寫形式顯示

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選擇器。考慮到這一點，你可以得到innerText與jQuery .text()：

// 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()); 

我希望這是你要找的！

編輯：另一種方法需要修改的HTML的特定p：

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()); 

這裏我用了一個類似的想法到第一個例子，除了不是選擇所有段落ta gs，我在現有的版本中添加了一個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>