Question

Hi I'm trying to display different content in a modal depending on whats clicked. The modal works fine but I'm trying to find a more efficient way of writing the following code to display the content.

$(document).ready(function(){
    $('#block').hasClass('block1'); {
        $('.block1').click(function(){
       modal.open({content: $("<p>display this content</p>"), width: "500px", height: "200px"});
    })
   } 

   $('#block').hasClass('block2'); {
        $('.block2').click(function(){
       modal.open({content: $("<p>has different content</p>"), width: "500px", height: "200px"});
    })
   } 

   $('#block').hasClass('block3'); {
        $('.block3').click(function(){
       modal.open({content: $("<p>and again different</p>"), width: "500px", height: "200px"});
    })
   }     


});
Was it helpful?

Solution

$(document).ready(function(){
   $('.block').click(function(){
       var content = '';
       if($(this).hasClass('block1'))content = 'content1'
       if($(this).hasClass('block2'))content = 'content2'
       if($(this).hasClass('block2'))content = 'content3'
       modal.open({content: $("<p>" + content  + "</p>"), width: "500px", height: "200px"});
    })
});
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top