あるdivから別のdivへの動的な文字列の更新

Question

私はh3形式の文字列を含むdivのリストを持っています。これらのdivをクリックすると（それらはすべて同じクラスです）、ユーザー入力用のスライダを含む画面が表示されます（同じhtmlドキュメントの一部）。

画面が表示されたときに、divがクリックされた文字列が含まれるようにする方法はありますか？言い換えれば、ユーザーが "プッシュアップ"カードをタップ/クリックすると、 "#info"という靴が "プッシュアップ"に更新されます。ユーザーが "Iquats"を選択した場合、 "#info"ショー "スクワット" ec。

私は、JSONや何らかのサーバーマジックを使用しないとこれを行う方法は考えられません。コード！

HTML：指定した任意のヘルプやアイデアを

<!--HEADER--> 
<div class="header"> 
    <div id="info"> 
    <p>Select Exercise</p> <!--THIS IS WHERE I WOULD LIKE THE STRING TO UPDATE--> 
    </div> 
</div> 

<!--EXERCISE LIST--> 
<div id="exerciseContainer"> 
    <div class="exerciseL exercise"> 
    <h3>Push Ups</h3> 
    </div> 
    <div class="exerciseR exercise"> 
    <h3>Dips</h3> 
    </div> 
    <div class="exerciseL exercise"> 
    <h3>Burpees</h3> 
    </div> 
    <div class="exerciseR exercise"> 
    <h3>Plank</h3> 
    </div> 
    <div class="exerciseL exercise"> 
    <h3>Sit Ups</h3> 
    </div> 
    <div class="exerciseR exercise"> 
    <h3>Leg Ups</h3> 
    </div> 
    <div class="exerciseL exercise"> 
    <h3>Russian Twists</h3> 
    </div> 
    <div class="exerciseR exercise"> 
    <h3>Back Raises</h3> 
    </div> 
</div> 

<!--SPECIFY TIMING FOR EXERCISES--> 
<div id="specifier"> 
    <div id="containSliders"> 
    <!--Exercise time allocator--> 
    <h1></h1> <!--I WOULD LIKE THIS TO UPDATE ALSO--> 
    <div id="containSliderOne"> 
     <p>Time:</p> 
     <output id="timeValue">60 sec.</output> 
     <input type="range" id="determineTime" step="10" value="60" min="0" max="180" /> 
    </div> 
    <!--Exercise time allocator--> 
    <div id="containSliderTwo"> 
     <p>Rest Time:</p> 
     <output id="restValue">10 sec.</output> 
     <input type="range" id="determineRest" step="10" value="10" min="0" max="180" /> 
    </div> 
    <!--Add rest button--> 
    <div id="addBreak"><p>Add Break</p></div> 
    <!--Back Button--> 
    <div id="cancel"> 
     <a id="exerciseCancel" href="exercises.html"> 
     <img src="images/backButtonUp.png" width="100" alt=""/> 
     <img src="images/backButtonDown.png" width="85" alt=""/> 
     </a> 
    </div> 
    <!--Confirm Button--> 
    <div id="confirm"> 
     <a id="exerciseConfirm" href="routineOverview.html"> 
     <img src="images/whiteTickUp.png" width="95" alt=""/> 
     <img src="images/whiteTickDown.png" width="80" alt=""/> 
     </a> 
    </div> 
    </div> 
</div> 

のJavaScript（jQueryの）

$(".exercise").click(function() 
    { 
    $("#specifier").css("display", "block"); 
    $(".backButton").css("display", "none"); 
    }); 

ありがとう！

Answer 1

私が正しく理解していれば、clickイベント内で$（this）.text（）を使用して、クリックされた要素テキストを取得できます。

$(function() { 
 
    $('.exercise').click(function() { 
 
    $('#info').text($(this).text()); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
 
<!--HEADER--> 
 
<div class="header"> 
 
    <div id="info"> 
 
    <p>Select Exercise</p> 
 
    <!--THIS IS WHERE I WOULD LIKE THE STRING TO UPDATE--> 
 
    </div> 
 
</div> 
 

 
<!--EXERCISE LIST--> 
 
<div id="exerciseContainer"> 
 
    <div class="exerciseL exercise"> 
 
    <h3>Push Ups</h3> 
 
    </div> 
 
    <div class="exerciseR exercise"> 
 
    <h3>Dips</h3> 
 
    </div> 
 
    <div class="exerciseL exercise"> 
 
    <h3>Burpees</h3> 
 
    </div> 
 
    <div class="exerciseR exercise"> 
 
    <h3>Plank</h3> 
 
    </div> 
 
    <div class="exerciseL exercise"> 
 
    <h3>Sit Ups</h3> 
 
    </div> 
 
    <div class="exerciseR exercise"> 
 
    <h3>Leg Ups</h3> 
 
    </div> 
 
    <div class="exerciseL exercise"> 
 
    <h3>Russian Twists</h3> 
 
    </div> 
 
    <div class="exerciseR exercise"> 
 
    <h3>Back Raises</h3> 
 
    </div> 
 
</div> 
 

 
<!--SPECIFY TIMING FOR EXERCISES--> 
 
<div id="specifier"> 
 
    <div id="containSliders"> 
 
    <!--Exercise time allocator--> 
 
    <h1></h1> 
 
    <!--I WOULD LIKE THIS TO UPDATE ALSO--> 
 
    <div id="containSliderOne"> 
 
     <p>Time:</p> 
 
     <output id="timeValue">60 sec.</output> 
 
     <input type="range" id="determineTime" step="10" value="60" min="0" max="180" /> 
 
    </div> 
 
    <!--Exercise time allocator--> 
 
    <div id="containSliderTwo"> 
 
     <p>Rest Time:</p> 
 
     <output id="restValue">10 sec.</output> 
 
     <input type="range" id="determineRest" step="10" value="10" min="0" max="180" /> 
 
    </div> 
 
    <!--Add rest button--> 
 
    <div id="addBreak"> 
 
     <p>Add Break</p> 
 
    </div> 
 
    <!--Back Button--> 
 
    <div id="cancel"> 
 
     <a id="exerciseCancel" href="exercises.html"> 
 
     <img src="images/backButtonUp.png" width="100" alt="" /> 
 
     <img src="images/backButtonDown.png" width="85" alt="" /> 
 
     </a> 
 
    </div> 
 
    <!--Confirm Button--> 
 
    <div id="confirm"> 
 
     <a id="exerciseConfirm" href="routineOverview.html"> 
 
     <img src="images/whiteTickUp.png" width="95" alt="" /> 
 
     <img src="images/whiteTickDown.png" width="80" alt="" /> 
 
     </a> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

プログラム的に要素を作成することが望ましいでしょう。

var arrExercises = ['Push Ups', 'Dips', 'Burpees'];//add all exercises here 
arrExercises.forEach(function(exercise, i){ 
    var $exercise = $('<div>', {id:'div-excercise-'+i, "class":'exercise'});//create the exercise element 
    //give the on click handler to the exercise 
    $exercise.on('click', function(e){ 
     $("#specifier").css("display", "block"); 
     $(".backButton").css("display", "none"); 
     $("#info").text(exercise);//set the info to the exercise text 
    }); 
    $('#exerciseContainer').append($exercise);//append this exercise to the container 
});