Dynamische Aktualisierung der Zeichenfolge von einem Div zu einem anderen

Question

Ich habe eine Liste von Divs, die eine Zeichenfolge im Format H3 enthalten. Nach dem Klicken auf diese divs (sie sind alle der gleichen Klasse) wird ein Bildschirm angezeigt (Teil des gleichen HTML-Dokuments) mit einigen Schieberegler für Benutzereingaben.

Gibt es eine Möglichkeit, es so zu machen, dass, wenn der Bildschirm angezeigt wird, enthält es die Zeichenfolge von was auch immer div geklickt wurde? Mit anderen Worten, wenn der Benutzer auf die "Push Ups" Karte tippt/klickt, möchte ich das div "#info" auf "push ups" updaten, wenn der Benutzer "Iquats" wählt, möchte ich "#info" zeige "Kniebeugen" ec.

Ich kann mir keinen Weg vorstellen, dies zu tun, ohne JSON oder irgendeine Art von Serverzauber zu benutzen. CODE!

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"); 
    }); 

Vielen Dank für jede Hilfe und gegebenen Ideen!

Answer 1

Wenn ich Sie richtig verstehe, können Sie das geklickt Element Text von $ mit (diese) .text() innerhalb des Click-Ereignis erhalten.

$(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

Es wäre vorzuziehen, die Elemente programmatisch zu erstellen.

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