1

Boa noite, tenho uma modal para exibir informações sobre um produto, até então eu consigo exibir esse dados com esse script

$('a[data-target="#saberModal"]').on('click', function (e) {
    e.preventDefault();
    var nome = $(this).data('nome');
    var descricao = $(this).data('descricao');
    $('div.textoSaber').html(nome + descricao);
    $('#saberModal').modal('show');
    return false;
});

Só que o nome fica grudado da descrição, gostaria de saber como formatar esses elemento no meu html para que eles sejam exibidos corretamente. tentei alterar o script deste modo.

$('a[data-target="#saberModal"]').on('click', function (e) {
    e.preventDefault();
    var nome = $(this).data('nome');
    var descricao = $(this).data('descricao');
    $('div.textoSaber').html(nome);
    $('div.descricao').html(descricao);
    $('#saberModal').modal('show');
    return false;
});

porem só é exibido o nome, a descrição não.

1
  • Tem alguma imagem do erro? Ou melhor, consegue postar o código completo em um JSBin, JSFiddle ou CodePen? Commented 10/01/2017 às 10:19

1 Resposta 1

1

Depende muito da formatação que você quer fazer, se você quer destacar o nome e a descrição abaixo, ou tudo na mesma linha, nome e/ou descrição em negrito, etc

Você pode colocar o código html normalmente no seu código javascript. Segue exemplos:

Observe que no exemplo 3 é o mais aproximado do seu exemplo e você pode formatar direto no seu css.

// ------ Exemplo 1 -----


   //Nomes estáticos para facilitar no código
    var nome = 'Nome para teste';
    var descricao = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pharetra enim dui. Suspendisse vel velit erat. Donec vel dictum nisl. Vestibulum fermentum euismod sapien. '


    //Concatena o html já existente com o código da linha abaixo
    $('div.textoSaber').append('<h2>'+nome+'</h2>')
    $('div.textoSaber').append('<p>'+descricao+'</p>');


// ------ Exemplo 2 -----


    $('div.textoSaber2').html('<p>'+nome+'</p>'+'<p>'+descricao+'</p>');



// ------ Exemplo 3 -----
$('div.textoSaber3').html('<p>'+nome+'</p>');
$('div.descricao').html('<p>'+descricao+'</p>');
.descricao{ margin-top:20px;display:inline-block;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="textoSaber"></div>

<hr/>

<div class="textoSaber2"></div>

<hr/>

<div class="textoSaber3"></div>
<div class="descricao"></div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .