En cliquant sur un span, comment puis-je changer le contenu d'un autre div?

Disons que j'ai ceci:En cliquant sur un span, comment puis-je changer le contenu d'un autre div?

<div class="title">Title Example 1</div> 
<span id="test">Button</span>

Et puis cliquetis d'une période appelée #test comment puis-je modifier le texte .title?

J'ai essayé avec cela, mais n'a pas fonctionné:

$('#test').click(function(){ 
    $(".title").text("Haha"); 
    return false; 
});

HTML complet:

<html> 
<head> 
    <title>Page</title> 
    <link rel="stylesheet" href="index.css"> 
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 
    <script type="text/javascript" src="/fancybox/source/jquery.fancybox.js?v=2.1.5"></script> 
     <script type="text/javascript"> 
     $('#test').click(function(){ 
    $(".title").text("Haha"); 
    return false; 
}); 
    </script> 
     <script type="text/javascript"> 
     $(document).ready(function() { 
      /* 
      * Simple image gallery. Uses default settings 
      */ 

      $('.fancybox').fancybox(); 

      /* 
      * Different effects 
      */ 

      $('.fancybox-effects-a').fancybox({ 
        autoDimensions: false, 
        height: 568, 
        width: 611 
       }); 

      // Change title type, overlay closing speed 
      $(".fancybox-effects-a").fancybox({ 
       helpers: { 
        title : { 
         type : 'outside' 
        }, 
        overlay : { 
         speedOut : 0 
        } 
       } 
      }); 

      // Disable opening and closing animations, change title type 
      $(".fancybox-effects-b").fancybox({ 
       openEffect : 'none', 
       closeEffect : 'none', 

       helpers : { 
        title : { 
         type : 'over' 
        } 
       } 
      }); 

      // Set custom style, close if clicked, change title type and overlay color 
      $(".fancybox-effects-c").fancybox({ 
       wrapCSS : 'fancybox-custom', 
       closeClick : true, 

       openEffect : 'none', 

       helpers : { 
        title : { 
         type : 'inside' 
        }, 
        overlay : { 
         css : { 
          'background' : 'rgba(238,238,238,0.85)' 
         } 
        } 
       } 
      }); 

      // Remove padding, set opening and closing animations, close if clicked and disable overlay 
      $(".fancybox-effects-d").fancybox({ 
       padding: 0, 

       openEffect : 'elastic', 
       openSpeed : 150, 

       closeEffect : 'elastic', 
       closeSpeed : 150, 

       closeClick : true, 

       helpers : { 
        overlay : null 
       } 
      }); 

      /* 
      * Button helper. Disable animations, hide close button, change title type and content 
      */ 

      $('.fancybox-buttons').fancybox({ 
       openEffect : 'none', 
       closeEffect : 'none', 

       prevEffect : 'none', 
       nextEffect : 'none', 

       closeBtn : false, 

       helpers : { 
        title : { 
         type : 'inside' 
        }, 
        buttons : {} 
       }, 

       afterLoad : function() { 
        this.title = 'Image ' + (this.index + 1) + ' of ' + this.group.length + (this.title ? ' - ' + this.title : ''); 
       } 
      }); 


      /* 
      * Thumbnail helper. Disable animations, hide close button, arrows and slide to next gallery item if clicked 
      */ 

      $('.fancybox-thumbs').fancybox({ 
       prevEffect : 'none', 
       nextEffect : 'none', 

       closeBtn : false, 
       arrows : false, 
       nextClick : true, 

       helpers : { 
        thumbs : { 
         width : 50, 
         height : 50 
        } 
       } 
      }); 

      /* 
      * Media helper. Group items, disable animations, hide arrows, enable media and button helpers. 
      */ 
      $('.fancybox-media') 
       .attr('rel', 'media-gallery') 
       .fancybox({ 
        openEffect : 'none', 
        closeEffect : 'none', 
        prevEffect : 'none', 
        nextEffect : 'none', 

        arrows : false, 
        helpers : { 
         media : {}, 
         buttons : {} 
        } 
       }); 

      /* 
      * Open manually 
      */ 

      $("#fancybox-manual-a").click(function() { 
       $.fancybox.open('1_b.jpg'); 
      }); 

      $("#fancybox-manual-b").click(function() { 
       $.fancybox.open({ 
        href : 'iframe.html', 
        type : 'iframe', 
        padding : 5 
       }); 
      }); 

      $("#fancybox-manual-c").click(function() { 
       $.fancybox.open([ 
        { 
         href : '1_b.jpg', 
         title : 'My title' 
        }, { 
         href : '2_b.jpg', 
         title : '2nd title' 
        }, { 
         href : '3_b.jpg' 
        } 
       ], { 
        helpers : { 
         thumbs : { 
          width: 75, 
          height: 50 
         } 
        } 
       }); 
      }); 


     }); 
    </script> 
    <link rel="stylesheet" type="text/css" href="/fancybox/source/jquery.fancybox.css?v=2.1.5" media="screen" /> 
</head> 
<body> 
       <div class="title">Title Example 1</div> 
<span id="test">Button</span> 
</body> 
</html>

Source

2013-07-24 starbucks

[Fonctionne parfaitement pour moi] (http://jsfiddle.net/ mblase75/B9wXY /) – Blazemonger

Merci mais ça ne marche pas sur le mien et je n'ai pas d'erreurs. comment puis-je déboguer cela? – starbucks

@starbucks Envoyez-nous votre page HTML complète? – lifetimes

place une "alerte()" comme première déclaration de votre fonction et voyez si vous obtenez un messagebox popup?

Editer: Essayez de placer votre fonction d'événement Click dans le bloc $ (document) .ready (function() {}). Je pense que votre fonction n'est jamais assignée à l'événement click du contrôle html.

Édition2: Testé et confirmé. Votre script n'est jamais affecté au gestionnaire d'événements click. Soit vous utilisez la balise html en ligne

<span id="test" onclick="myFunction()">button</span>

puis changer votre script à être contenu dans une fonction appelée myFunction

<script type="text/javascript"> 
     function myFunction() { 
       $(".title").text("Haha"); //I would advise using .html here though 
       return false; 
     } 
</script>

ou l'affecter lorsque la page est complètement chargée par JQuery

<script type="text/javascript"> 
     $(document).ready(function() { 
      $('#test').click(function() { 
       $(".title").text("Haha"); 
       return false; 
      }); 
etc... 
</script>

Source

2013-07-24 13:29:04 Recipe

encore usinh 'alert()' ?? Avoir 'console.log()' messages pour le débogage. – Praveen

J'ai essayé d'utiliser alert() mais il n'en génère pas. – starbucks

Si vous ne générez pas d'alerte, votre code n'est pas exécuté.Il se peut que votre code ait planté avant l'instruction d'alerte (dans ce cas, déplacez l'alerte d'un niveau) ou que votre code ne soit jamais exécuté car il n'est pas appelé. J'ai mis à jour ma réponse, essayez-le d'abord. – Recipe

Vous essayez de lier le gestionnaire d'événements à l'élément avant qu'il n'existe.

Déplacez le <script> pour qu'il apparaisse après le <span>.

Source

2013-07-24 13:45:25 Quentin

-1

Essayez .html() au lieu de .text() et envelopper votre bind autour d'un document prêt puisque vous appelez avant votre code html

Source

2013-07-24 13:49:08

En cliquant sur un span, comment puis-je changer le contenu d'un autre div?

Répondre

Questions connexes