Wie weisen Sie Elementen in einem Text eindeutige Klickereignisse zu?

Was ich wollte, ist:Wie weisen Sie Elementen in einem Text eindeutige Klickereignisse zu?

Wenn ich auf was? Text, Tool-Tipp erscheint mit Text "weitergehen" aber ich möchte die QuickInfo erscheint auf was? Text statt weitergehen Text.
Wenn ich auf den Tooltip klicke, möchte ich, dass es verschwindet, ich meine, wenn ich mit Text "hey hey" klicke, verschwindet es, aber wenn ich auf Tooltip klicke, verschwindet es nicht. Wie kann ich es auf "Tooltip" -Klasse anstelle von "schließen" -Klasse festlegen.

Danke. Zum besseren Verständnis füge ich hier meine Arbeit hinzu;

$(document).ready(function() { 
 
    $(".content a").click(function() { 
 
    var obj = $(this); 
 
    var tooltip = obj.data("tooltip"); 
 
    obj.append('<div class="tooltip">' + tooltip + '</div>'); 
 
    }); 
 
    $(this).mousemove(function() { 
 
    var x = $(".text").position(); 
 
    $(".tooltip").css({ 
 
     "top": x.top - 35, 
 
     "left": x.left - 35 
 
    }); 
 
    }); 
 

 
    $(".close").click(function() { 
 
    $(".tooltip").hide(); 
 
    }); 
 
});

body { 
 
    margin: auto; 
 
    font: 14px/22px Arial; 
 
    background: #ddd 
 
} 
 
.content { 
 
    width: 500px; 
 
    margin: 10px auto; 
 
    background: #fff; 
 
    border: 5px solid #eee; 
 
    padding: 10px 
 
} 
 
.content a { 
 
    color: #fa6578 
 
} 
 
.tooltip { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    z-index: 3; 
 
    background: #333; 
 
    padding: 5px; 
 
    color: #fff 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="content"> 
 
    <span class="close">hey hey </span><a class="text" href="#" data-tooltip="go on">go on</a> bla bla bla <a class="text" href="#" data-tooltip="what?">what?</a> 
 
</div>

Quelle

2016-12-13 Talha Özdemir

sorry ich konnte nicht verstehen. – Mahi

'var x = $ (". Text "). Position();' gibt die Position des ersten Elements zurück, das mit '" .text "' selector übereinstimmt. – pawel

Sorry nochmal: Ich kann das auch nicht verstehen. Vielleicht wäre es klarer, wenn Sie nicht über "Tooltip" sprechen würden, was normalerweise als Titelattribut eines DOM-Elements verstanden wird. – cFreed

Eigentlich brauchen Sie nicht die Position mit Jquery zu setzen, können Sie relativ die a Eltern machen; auch für die close Aktion verwenden die gleiche Klasse auf dem Tooltip:

$(document).ready(function() { 
 
    $(".content a").click(function() { 
 
    $(".tooltip").hide(); 
 
    var obj = $(this); 
 
    var tooltip = obj.data("tooltip"); 
 
    obj.append('<div class="tooltip close">' + tooltip + '</div>'); 
 
    }); 
 

 
    $("body").on('click','.close',function() { 
 
    $(".tooltip").hide(); 
 
    }); 
 
});

body { 
 
    margin: auto; 
 
    font: 14px/22px Arial; 
 
    background: #ddd 
 
} 
 
.content { 
 
    width: 500px; 
 
    margin: 10px auto; 
 
    background: #fff; 
 
    border: 5px solid #eee; 
 
    padding: 10px 
 
} 
 
.content a { 
 
    color: #fa6578; 
 
    position:relative; 
 
} 
 
.tooltip { 
 
    position: absolute; 
 
    top: 100%; 
 
    left: 50%; 
 
    width:100%; 
 
    z-index: 3; 
 
    background: #333; 
 
    padding: 5px; 
 
    color: #fff 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="content"> 
 
    <span class="close">hey hey </span><a class="text" href="#" data-tooltip="go on">go on</a> bla bla bla <a class="text" href="#" data-tooltip="what?">what?</a> 
 
</div>

Quelle

2016-12-13 16:21:37 DaniP

@ TalhaÖzdemir froh zu helfen U ... zu erhöhen opt vielleicht versuchen zu entfernen, anstatt zu verstecken(), weil Sie ein Element jedes Mal anhängen, wenn Sie den Anker klicken – DaniP

Ich habe noch ein Problem können Sie mir helfen? Zum Beispiel klickt jemand auf den Text, der Tooltip erscheint, das ist in Ordnung und wir haben Klick-Event hinzugefügt, um den Tooltip zu verstecken, der auch in Ordnung ist. Was, wenn ich QuickInfo in 2 Sekunden verschwinden lassen möchte, wenn niemand darauf klickt? @DaniP –

Suche über 'setTimeout()' @ TalhaÖzdemir wie folgt https://jsfiddle.net/vd8dd7md/ – DaniP

Sie haben den Stil depanding auf der geklickten Ankerposition einzustellen: Sie

$(".tooltip").css({ 
    "top" : obj.position().top - 35, 
    "left" : obj.position().left - 35 
});

Auch brauchen Ereignis Delegation on() in dem Click-Ereignis des tooltip zu verwenden, da Es wird dynamisch zum DOM hinzugefügt:

$("body").on('click', ".tooltip", function() { 
    $(".tooltip").hide(); 
});

HINWEIS: KEINE Notwendigkeit für das Ereignis mousemove.

Hope dies hilft.

$(document).ready(function() { \t 
 
    $(".content a").click(function(){ 
 
    var obj = $(this); 
 
    var tooltip = obj.data("tooltip"); 
 
    obj.append('<div class="tooltip">' + tooltip +'</div>'); 
 
    
 
    $(".tooltip").css({ 
 
     "top" : obj.position().top - 35, 
 
     "left" : obj.position().left - 35 
 
    }); 
 
    }); 
 
    $("body").on('click', ".tooltip", function() { 
 
    $(".tooltip").hide(); 
 
    }); 
 
});

body { 
 
    margin: auto; 
 
    font: 14px/22px Arial; 
 
    background: #ddd 
 
} 
 
\t 
 
.content { 
 
    width: 500px; 
 
    margin: 10px auto; 
 
    background: #fff; border: 5px solid #eee; 
 
    padding: 10px 
 
} 
 
\t 
 
.content a { 
 
    color: #fa6578 
 
} 
 
\t 
 
.tooltip { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    z-index: 3; 
 
    background: #333; 
 
    padding: 5px; 
 
    color: #fff 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="content"> 
 
    <span class="close">hey hey </span> 
 
    <a class="text" href="#" data-tooltip="go on">go on</a> bla bla bla <a class="text" href="#" data-tooltip="what?">what?</a> 
 
</div>

Quelle

2016-12-13 16:19:45

Sie müssen die Position des Tooltips in Bezug auf auf das Element geklickt. Sie können dies leicht innerhalb von $ (". content a"). click() -Methode.

Für das zweite Problem können Sie die Ereignisdelegierung verwenden, da das Tooltip-Element dynamisch an DOM angehängt wird.

$(document).ready(function() { \t 
 
    
 
     var x; 
 
\t \t $(".content a").click(function(){ 
 
\t \t \t var obj = $(this); 
 
\t \t \t var tooltip = obj.data("tooltip");  
 
      $(".tooltip").remove(); 
 
\t \t \t obj.append('<div class="tooltip">' + tooltip +'</div>'); 
 
      x = $(this).position();// here we are gtting the postion of the current clicked element. 
 
\t \t \t $(".tooltip").css({ 
 
\t \t \t \t "top" : x.top - 35, 
 
\t \t \t \t "left" : x.left - 35 
 
\t \t  }); 
 
      
 
\t \t }); 
 
\t \t 
 
    
 
    
 
    $(document).on("click",".tooltip", function() // event delegation 
 
    { 
 
\t \t $(".tooltip").hide(); 
 
\t }); 
 
});

body { 
 
    margin: auto; 
 
    font: 14px/22px Arial; 
 
    background: #ddd 
 
} 
 
\t 
 
.content { 
 
    width: 500px; 
 
    margin: 10px auto; 
 
    background: #fff; border: 5px solid #eee; 
 
    padding: 10px 
 
} 
 
\t 
 
.content a { 
 
    color: #fa6578 
 
} 
 
\t 
 
.tooltip { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    z-index: 3; 
 
    background: #333; 
 
    padding: 5px; 
 
    color: #fff 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="content"> 
 
<span class="close">hey hey </span><a class="text" href="#" data-tooltip="go on">go on</a> bla bla bla <a class="text" href="#" data-tooltip="what?">what?</a> 
 
</div>

Quelle

2016-12-13 16:27:25 Deep

Wie weisen Sie Elementen in einem Text eindeutige Klickereignisse zu?

Antwort

Verwandte Themen