Wie schreibe ich diesen Code sauberer, ohne Wiederholung?

Question

$("#yl").click(function(){updateYear("sub")}); 
    $("#yr").click(function(){updateYear("add")}); 
    $("#ml").click(function(){updateMonth("sub")}); 
    $("#mr").click(function(){updateMonth("add")}); 
    $("#dl").click(function(){updateDay("sub")}); 
    $("#dr").click(function(){updateDay("add")}); 

Gibt es eine Möglichkeit, diesen Code cleaner zu schreiben, schlauer ohne Wiederholungen?

Answer 1

Wenn Sie Ihre Elemente ein wenig ändern, könnten Sie so etwas tun:

<button id='yr' data-type='update' data-date-part='year' data-date-action='add'> 

Sie dann eine Update-Funktion erstellen, die wie folgt beginnt:

function update() { 
    const el = $(this); 
    const datePart = el.attr('data-date-part'); 
    const dateAction = el.attr('data-date-action'); 

    // do your logic to update the date based on what part and action 
} 

Ihre Click-Handler Dann einfach muss sein:

Ich habe vergessen zu erwähnen, dass neuere Versionen von Jquery auch le t Sie verwenden nur die .data() Funktion anstelle der Schreibweise data- Attribut

Answer 2

Der Code ist in Ordnung, wie es steht, da es sehr klar ist, was passiert.

Wenn Sie es wirklich anders machen wollen, dann sollten Sie wahrscheinlich auch Ihre Funktion (en) modifizieren und in HTML-Attribute schauen. Es hängt alles davon ab, was Sie tatsächlich in diesen Funktionen tun.

Wenn Sie zum Beispiel der Benutzer möchte nur ein Datum einzugeben durch Add/Untertasten drücken, dann könnten die Grundlagen wie folgt aussehen:

$('.change-value').click(updateDatePart); 
 

 
function updateDatePart() { 
 
    // Read current date 
 
    var dateParts = $.map($(this).closest(".dateinput").find(".part-value"), function (span) { 
 
     return +$(span).text(); 
 
    }); 
 
    // Which part of the date needs incrementing/decrementing? 
 
    var part = $(this).closest('.part').index(); 
 
    // Apply change to that part 
 
    dateParts[part] += $(this).data("inc"); 
 
    // Create a date with this 
 
    var date = new Date(dateParts[0], dateParts[1]-1, dateParts[2]); 
 
    // Get the parts for the new date (which may have resolved some overflow) 
 
    dateParts = [date.getFullYear(), date.getMonth()+1, date.getDate()]; 
 
    // Output the result 
 
    $('.part-value').each(function (i, elem) { 
 
     $(elem).text(dateParts[i]); 
 
    }); 
 
}

.change-value { font-size: 50% }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<span class="dateinput"> 
 
    <span class="part"> 
 
     <button class="change-value" data-inc="-1">-</button> 
 
     <span class="part-value">2017</span> 
 
     <button class="change-value" data-inc="1">+</button> 
 
    </span>- 
 
    <span class="part"> 
 
     <button class="change-value" data-inc="-1">-</button> 
 
     <span class="part-value">12</span> 
 
     <button class="change-value" data-inc="1">+</button> 
 
    </span>- 
 
    <span class="part"> 
 
     <button class="change-value" data-inc="-1">-</button> 
 
     <span class="part-value">24</span> 
 
     <button class="change-value" data-inc="1">+</button> 
 
    </span> 
 
</span>