Split-Daten-String mit Optionen

Question

Ich habe Sharing-Schaltflächen auf meiner Website implementiert, die die einzelnen Komponenten aus den Datenattributen (im Beispiel unten) zusammen für jede soziale Website übergibt.

html

<span data-title="Stackoverflow" data-description="Website" data-media="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon.png?v=c78bd457575a" data-url="url":"https://stackoverflow.com/questions/" class="share">  

Skript

var base = $('.share'), 
    thisUrl = window.location.href, 
    thistitle = base.data('title'), 
    thisdescription = base.data('description'), 
    thismedia = base.data('media'); 

Was würde ich lieber tun würde nur eine Datenfolge wie die Spanne zu haben, die ich weiter unten enthält alle Optionen zusammen was ich dann teilen und weitergeben könnte:

title = options.title 

description = options.description 

media = options.media 

url = options.url 

HTML:

<span data-opt="{"options":{"title":"Stackoverflow","description":"Website","media":"https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon.png?v=c78bd457575a","url":"https://stackoverflow.com/questions/"}}" >  

Jede Hilfe mit mir in der richtigen Richtung oder jede Beratung zeigen würde sehr geschätzt werden.

Answer 1

Ändern Sie die äußeren Attributwert-Anführungszeichen in einzelne und rufen Sie das gesamte Objekt mit jQuery data() ab.

Solange die Zeichenfolge gültig json ist, Daten() wird es automatisch analysieren, um das Objekt/Array

var data = $('span[data-opt]').data('opt'); 
 
console.log('Title is', data.options.title);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<span data-opt='{"options":{"title":"Stackoverflow","description":"Website","media":"https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon.png?v=c78bd457575a","url":"https://stackoverflow.com/questions/"}}' >