\r\n \r\n \r\n

果物の追加・削除

\r\n
\r\n
    \r\n
    \r\n
    \r\n \r\n
    \r\n \r\n
    \r\n 番に入っている果物を\r\n \r\n
    \r\n
    \r\n

    ソースコードの表示

    \r\n
    \r\n\r\n
    \r\n \r\n\r\n```","answerCount":1,"upvoteCount":0,"datePublished":"2021-11-19T04:17:27.607Z","dateModified":"2021-11-19T04:17:27.607Z","acceptedAnswer":{"@type":"Answer","text":"こんな感じ。あとは調整してください\r\n```javascript\r\n\r\n
    \r\n
      \r\n
      \r\n
      \r\n\r\n
      \r\n\r\n
      \r\n番に入っている果物を\r\n\r\n
      \r\n
      \r\n```\r\n\r\n# ソース表示\r\n```javascript\r\n\r\n
      \r\n
        \r\n
        \r\n
        \r\n\r\n
        \r\n\r\n
        \r\n番に入っている果物を\r\n\r\n
        \r\n
        \r\n
        \r\n
        \r\n```","dateModified":"2021-11-19T05:14:00.306Z","datePublished":"2021-11-19T04:32:46.434Z","upvoteCount":0,"url":"https://teratail.com/questions/370079#reply-501990"},"suggestedAnswer":[],"breadcrumb":{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"トップ","url":"https://teratail.com"},{"@type":"ListItem","position":2,"name":"jQueryに関する質問","url":"https://teratail.com/tags/jQuery"},{"@type":"ListItem","position":3,"name":"jQuery","url":"https://teratail.com/tags/jQuery"}]}}}
        質問するログイン新規登録
        jQuery

        jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

        HTML

        HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

        Q&A

        解決済

        1回答

        591閲覧

        jQueryで実装したい関数について

        martini777

        総合スコア2

        jQuery

        jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

        HTML

        HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

        0グッド

        0クリップ

        投稿2021/11/19 04:17

        0

        0

        前提・実現したいこと

        現在制作しているページに下記の機能を実装したいと思っています。
        ・番号を指定すると、その<li>を削除する機能。
        (1.りんごが入っていたとすると、1を入力すると該当する<li>が削除される仕組み)
        ・番号を指定すると、その<li>に入っている果物の名前だけを入力した値で置換する機能。
        (1.りんごが入っていたとすると、1を入力し置換したい値に桃を入れて置換すると1.りんごが1.桃に置換される仕組み)
        ・リストの中の表示をHTML表記にする機能

        悩んでいる部分

        ・番号を指定するとの2つが、どういう書き方をすればいいのか分からない。
        ・リストの中の表記をHTML表記に変更するコードですが、なぜ動かないのか分からない。

        該当のソースコード

        html

        1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="utf-8"> 5 <!--jqueryのファイルは省略--> 6 <style> 7 div 8 { 9 width:250px; 10 height:100px; 11 border:1px blue solid; 12 border-width: 3px; 13 overflow:auto; 14 } 15 #fruit,#numdel,#numrep,#repfruit 16 { 17 width: 100px; 18 } 19 </style> 20 <script> 21 function addition() 22 { 23 $("#viewer > ol:first").append($("<li>" + $("#fruit").val() + "</li>")); 24 } 25 function Eledelete() 26 { 27 // 入力した番号を代入 28 let inpNum = $("#numdel").val(); 29 } 30 function Replacement() 31 { 32 33 } 34 // リストのソースコードを表示 35 $("#sourcecode>div").val($("#viewer>ol").html()); 36 </script> 37 </head> 38 <body> 39 <h1>果物の追加・削除</h1> 40 <div id="viewer"> 41 <ol></ol> 42 </div> 43 <form> 44 <input type="text" id="fruit" /> 45 <input type="button" onClick="addition()" value="果物を追加" /><br /> 46 <input type="text" id="numdel" /> 47 <input type="button" onClick="Eledelete()" value="番を削除" /><br /> 48 <input type="text" id="numrep" />番に入っている果物を 49 <input type="text" id="repfruit" /> 50 <input type="button" onClick="Replacement()" value="に置換" /><br /> 51 </form> 52 <h1>ソースコードの表示</h1> 53 <div id="sourcecode"> 54 55 </div> 56 </body> 57</html>

        気になる質問をクリップする

        クリップした質問は、後からいつでもMYページで確認できます。

        またクリップした質問に回答があった際、通知やメールを受け取ることができます。

        バッドをするには、ログインかつ

        こちらの条件を満たす必要があります。

        guest

        回答1

        0

        ベストアンサー

        こんな感じ。あとは調整してください

        javascript

        1<script> 2$(function(){ 3 $('#add').on('click',function(){ 4 if($('#fruit').val()){ 5 $('#viewer ol').append($('<li>').text($('#fruit').val())); 6 } 7 }); 8 $('#del').on('click',function(){ 9 if($('#numdel').val()){ 10 $('#viewer ol li').eq($('#numdel').val()-1).remove(); 11 } 12 }); 13 $('#replace').on('click',function(){ 14 if($('#numrep').val() && $('#repfruit').val()){ 15 $('#viewer ol li').eq($('#numrep').val()-1).text($('#repfruit').val()); 16 } 17 }); 18}); 19</script> 20<div id="viewer"> 21<ol></ol> 22</div> 23<form> 24<input type="text" id="fruit"> 25<input type="button" id="add" value="果物を追加"><br> 26<input type="text" id="numdel"> 27<input type="button" id="del" value="番を削除"><br> 28<input type="text" id="numrep">番に入っている果物を 29<input type="text" id="repfruit"> 30<input type="button" id="replace" value="に置換"><br> 31</form>

        ソース表示

        javascript

        1<script> 2$(function(){ 3 $('#add').on('click',function(){ 4 if($('#fruit').val()){ 5 $('#viewer ol').append($('<li>').text($('#fruit').val())); 6 viewsource(); 7 } 8 }); 9 $('#del').on('click',function(){ 10 if($('#numdel').val()){ 11 $('#viewer ol li').eq($('#numdel').val()-1).remove(); 12 } 13 viewsource(); 14 }); 15 $('#replace').on('click',function(){ 16 if($('#numrep').val() && $('#repfruit').val()){ 17 $('#viewer ol li').eq($('#numrep').val()-1).text($('#repfruit').val()); 18 } 19 viewsource(); 20 }); 21 function viewsource(){ 22 console.log(1); 23 $("#sourcecode").text($("#viewer>ol").html()); 24 } 25}); 26</script> 27<div id="viewer"> 28<ol></ol> 29</div> 30<form> 31<input type="text" id="fruit"> 32<input type="button" id="add" value="果物を追加"><br> 33<input type="text" id="numdel"> 34<input type="button" id="del" value="番を削除"><br> 35<input type="text" id="numrep">番に入っている果物を 36<input type="text" id="repfruit"> 37<input type="button" id="replace" value="に置換"><br> 38</form> 39<hr> 40<div id="sourcecode"></div>

        投稿2021/11/19 04:32

        編集2021/11/19 05:14
        yambejp

        総合スコア118164

        バッドをするには、ログインかつ

        こちらの条件を満たす必要があります。

        martini777

        2021/11/19 05:14 編集

        1.りんご 2.もも と追加していくと、ソースコードの表示のところに <ol><li>りんご</li><li>もも</li></ol>と表記したいのですが、このコードのどの部分が間違っているのでしょうか。下記の部分です // リストのソースコードを表示 $("#sourcecode>div").val($("#viewer>ol").html());
        yambejp

        2021/11/19 05:15

        あ、ソース表示するんでしたね まず#sourcecode>div・・・#sourcecodeの中にdivはありません .val()・・・divにvalueはありませんので指定できません
        martini777

        2021/11/19 05:19

        ありがとうございます。無事全て動きました。
        guest

        あなたの回答

        tips

        太字

        斜体

        打ち消し線

        見出し

        引用テキストの挿入

        コードの挿入

        リンクの挿入

        リストの挿入

        番号リストの挿入

        表の挿入

        水平線の挿入

        プレビュー

        15分調べてもわからないことは
        teratailで質問しよう!

        ただいまの回答率
        85.29%

        質問をまとめることで
        思考を整理して素早く解決

        テンプレート機能で
        簡単に質問をまとめる

        質問する

        関連した質問