Wie kann ich dieses jQuery-Objekt-Skript einfacher machen?

begann ich zu realisieren, wenn ich mehr verschiedene Sachen in diesem Objekt hinzufügen würde anfangen werde ich mehr Code zuWie kann ich dieses jQuery-Objekt-Skript einfacher machen?

wo es output += element.item + '<br>' + element.cost + '<br>';

So besagten hinzufügen muß, wie kann ich diesen Code zu machen, wo ich nicht tun müssen Sie zusätzlichen Code für den Bereich eingeben, den ich diesem Objekt hinzufügen möchte?

Ich weiß, es gibt einen Weg, wo Sie nicht jedes Mal zusätzlichen Code für diesen Bereich eingeben müssen, zum Beispiel wenn ich dies zusätzlich hinzufügen würde (element.events etc ..) Ich müsste mehr zusätzliche eingeben Code zu diesem Bereich, der mehr Zeit braucht und so aussieht, was ich zum Beispiel vermeiden möchte.

element.item + '<br>' + element.cost + '<br>' + element.events + '<br>';

etc ... Also ich brauche eine neue Lösung so kann der Code automatisch ausgegeben werden alle Objekte Inhalte, damit ich keine neuen zusätzlichen Code eingeben, wo es wird gesagt

output += element.item + '<br>' + element.cost + '<br>';

Hier "Mein Code, über den ich rede.

var data = { 
 
    shop: [{ 
 
     item: "Ps3", 
 
     cost: "$150" 
 
    }, 
 
    { 
 
     item: "xbox 360", 
 
     cost: "$140" 
 
    } 
 
    ] 
 
}; 
 
$(document).ready(function() { 
 
    var z = $('.z'); // Grab class z to toggle 
 
    var x = $('#x'); 
 
    var output = ''; 
 
    $.each(data.shop, function(index, element) { 
 
    output += element.item + '<br>' + element.cost + '<br>'; 
 
    }); 
 
    x.html(output); 
 
    $("button").click(function() { 
 
    z.toggle(); // Toggle z on button click 
 
    }); 
 
});

h1 { 
 
    color: gold; 
 
} 
 

 
#x { 
 
    color: white; 
 
    text-align: center; 
 
} 
 
.z { 
 
    background-color: red; 
 
    width: 250px; 
 
    margin: auto; 
 
    padding-bottom: 5px; 
 
    display: none; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
</head> 
 
<body> 
 
<div class="z"> 
 
<h1>Details </h1> 
 
<h2 id="x"></h2> 
 
</div> 
 
<button>Click</button> 
 
</body> 
 
</html>

Quelle

2017-09-15 Anonymous

Bitte erklären, was das Problem ist, wie Ihre aktuelle Erklärung noch vage. –

Haben Sie so etwas wie dies wünschen?

Was ich getan habe ist, ich Schleife durch alle Tasten von element Variable in data.shop, so werde ich nur ein <br> Tag zu jedem der Werte des Elements hinzuzufügen. Es ist generisch und wird die Arbeit erledigen!

var data = { 
 
    shop: [{ 
 
     item: "Ps3", 
 
     cost: "$150" 
 
    }, 
 
    { 
 
     item: "xbox 360", 
 
     cost: "$140" 
 
    } 
 
    ] 
 
}; 
 
$(document).ready(function() { 
 
    var z = $('.z'); // Grab class z to toggle 
 
    var x = $('#x'); 
 
    var output = ''; 
 
    $.each(data.shop, function(index, element) { 
 
    for(var j in element){ 
 
     output += element[j] + '<br>' ; 
 
    } 
 
    }); 
 
    x.html(output); 
 
    $("button").click(function() { 
 
    z.toggle(); // Toggle z on button click 
 
    }); 
 
});

h1 { 
 
    color: gold; 
 
} 
 

 
#x { 
 
    color: white; 
 
    text-align: center; 
 
} 
 
.z { 
 
    background-color: red; 
 
    width: 250px; 
 
    margin: auto; 
 
    padding-bottom: 5px; 
 
    display: none; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
</head> 
 
<body> 
 
<div class="z"> 
 
<h1>Details </h1> 
 
<h2 id="x"></h2> 
 
</div> 
 
<button>Click</button> 
 
</body> 
 
</html>

Quelle

2017-09-15 20:45:50

Danke Naren Murali, du bist mein neuer bester Freund !!! Ha ha ha genau wonach ich gesucht habe. Vielen Dank. –

Wie kann ich dieses jQuery-Objekt-Skript einfacher machen?

Antwort

Verwandte Themen