jquery - html des Elements nach foreach Schleife

Question

Nicht sicher, wie dies zu tun ist. Ich bekomme eine Liste von Projekten mit PHP und MySQL.

Ich zeige das Projekt mit einer Schleife an. Dann benutze ich jquery click() Ich möchte den HTML-Code des Elements holen, wo ich den Projektnamen angezeigt habe, um den Namen irgendwo anders zu verwenden, aber es spielt keine Rolle, auf welches Projekt ich klicke, ich bekomme immer nur das erste Projekt der Schleife.

hier ist der Code:

<?php foreach ($projects as $project): ?> 
    <li class="todo-projects-item" data-projectid="<?php echo $project->project_id ?>"> 
    <h3 id="p_name" data-proname="<?php echo $project->project_name ?>"><?php echo $project->project_name ?></h3> 
    <p><?php echo $project->project_body ?></p> 
    <div class="todo-project-item-foot"> 
     <p class="todo-red todo-inline">Project #<?php echo $project->project_id ?></p> 
     <p class="todo-inline todo-float-r">32 Members 
     <a class="todo-add-button" href="#todo-members-modal" data-toggle="modal">+</a> 
     </p> 
    </div> 
    </li> 
    <div class="todo-projects-divider"></div> 
<?php endforeach; ?> 

Es mir das gibt folgendes:

Ich verwende in meinem Skript mit der Klick-Funktion:

pName = $('#p_name').data('proname'); 
alert(pName); 

Es spielt keine Rolle, auf welches Projekt ich klicke, es warnt immer "Das Projekt", der erste in meinem Array ... was mache ich falsch?

Answer 1

In welchem ​​Element befindet sich der Click-Handler?

Das Problem ist, dass Sie $('#p_name') verwenden, aber Sie haben tatsächlich viele Elemente auf der Seite mit der gleichen ID. Das ist eigentlich ein großes no-no ... Element-IDs sollten immer eindeutig sein.

Wenn der Click-Handler auf dem <li>-Tag ist, so etwas wie dies sollte besser funktionieren:

$('.todo-projects-item').click(function (e) { 
    e.preventDefault(); 
    alert($(this).find('h3').data('proname')); 
}); 

Answer 2

Sie sollten $ (this) verwenden, um das angeklickte Element zu erhalten.

$("h3").click(function() { 
    var pName = $(this).data("proname"); 
    alert(pName); 
}); 

Und wenn Sie das Click-Ereignis zu einem Elternteil des h3 sind Einhaken, können Sie $(this).find("h3") verwenden es zu packen.

Answer 3

One-ID in einer Seite nur einmal sein sollte. #p_name kann nur einmal verwendet werden. Wenn Sie, dass mehrere Zeit es als Klasse .p_name und in Ihrem Skript verwenden müssen, verwenden, um es ändern:

<h3 class="p_name" data-proname="<?php echo $project->project_name ?>"><?php echo $project->project_name ?></h3>