2

Quisiera manipular los atributos de este div que está dentro de un textarea con jQuery, pero no me reconoce ningún atributo. ¿Alguien tiene una idea cómo puedo manipular esos atributos?

quiero hacer algo parecido a esto: https://www.cssmatic.com/es/border-radius

Éste es el código:

<textarea> <div class="coinmarketcap-currency-widget" data-currencyid="bitcoin" data-base="COP" data-secondary="USD" data-ticker="true"></div> </textarea>

3
  • Yo veo una grave dificultad en tu HTML y es que tú tienes el div dentro de un textarea. Por definición, los textarea son para almacenar texto plano, no para meter otros elementos HTML dentro de ellos. Cuando tú haces eso, el div que está dentro del textarea no es un div como tal, o sea, no es parte del DOM, es sólo texto. ¿Por qué lo tienes en un textarea? Si quieres usarlo como un elemento del DOM tendrás que sacar el valor del text, que es todo lo que sería el div y crear un elemento DOM con ese texto.
    – A. Cedano
    Commented el 6 jul. 2018 a las 16:00
  • gracias por responder, realmente quiero hacer al parecido a esto : cssmatic.com/es/border-radius donde pueda manipular el codigo desde jquery como seria tienes alguna idea, gracias Commented el 6 jul. 2018 a las 16:04
  • Ese es un sitio externo, planteando la pregunta así para que alguien te responda tendría que ir a ese sitio, verificar el comportamiento del código y luego intentar una respuesta. Si tu eres el interesado te corresponde la primera etapa: dilucidar lo que hace ese código, y a partir de ahí intentar aplicarlo en tu contexto y plantear la pregunta en base a las dificultades que tengas al aplicarlo. Veo difícil que tengas una respuesta adecuada tal y como tienes planteada la pregunta ahora mismo.
    – A. Cedano
    Commented el 6 jul. 2018 a las 16:37

4 respuestas 4

1

Aquí está el ejemplo, ya solo es cuestión de que lo adaptes a tus necesidades.

$('.txtModificar').keyup(function() {

      var atributo_a_modificar = $(this).data('atributo_a_modificar');
      var valorReemplazo = $(this).val();

      $(".coinmarketcap-currency-widget").attr(atributo_a_modificar,valorReemplazo);
      atributos();
    });
    
    var detalles = "";
    function atributos(){

      $(".coinmarketcap-currency-widget").each(function(){      

        $.each(this.attributes, function() {
          if(this.name != 'class'){//aquí le digo cuales atributos no quiero mostrar
            detalles += this.name + ':' +'"'+ this.value +'"'+ '\n'  
          }
        });

        $('#txtArea').val(detalles);
        detalles = "";
        
      });
      
    }
 <!--Tu div-->
 <div class="coinmarketcap-currency-widget" data-currencyid="bitcoin" data-base="COP" data-secondary="USD" data-ticker="true"></div> 

<!--inputs text en donde manipularás los atributos de tu div-->
 <input type="text" class="txtModificar" placeholder="Manipular data-currencyid" data-atributo_a_modificar="data-currencyid"><br>
 
 <input type="text" class="txtModificar" placeholder="Manipular data-base" data-atributo_a_modificar="data-base"><br>

 <input type="text" class="txtModificar" placeholder="Manipular data-secondary" data-atributo_a_modificar="data-secondary"><br>

 <input type="text" class="txtModificar" placeholder="Manipular data-ticker" data-atributo_a_modificar="data-ticker"><br><br><br>

<!--Tu textarea-->
<textarea id="txtArea"></textarea>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

3
0

Los atributos data son atributos de HTML5 los cuales permite agregar valores personalizados a elementos del dom.

La sintaxis .data():

$(".coinmarketcap-currency-widget").data("base")

En caso de que quieras cambiarlo podrias usar :

$(".coinmarketcap-currency-widget").attr("data-base","COP2")
2
  • La respuesta podría ser mejor si explicaras un poco el funcionamiento.
    – A. Cedano
    Commented el 6 jul. 2018 a las 15:22
  • 1
    La explicación debería constar en la respuesta, no en un comentario. Ten en cuenta que las respuestas dadas sirven para el que las plantea y para futuros usuarios. Suponte alguien que ni siquiera sabe que existen los atributos data-, entra en esta pregunta y ve tu respuesta... Estas son preguntas interesantes donde se debería aprovechar para documentar un poco, explicando que son esos atributos como bien dices en tu comentario e incluso poniendo un enlace donde los futuros usuarios se puedan documentar. Eso daría más calidad a tu respuesta y sería más valorada por la comunidad.
    – A. Cedano
    Commented el 6 jul. 2018 a las 15:42
0

No se puede manipular una caja de texto. Tienes que hacer un objeto a esa cadena o insertarlo en el DOM. Puedes aplicar el siguiente ejemplo si te es de ayuda.

    //Obtiene el valor que hay dentro de tu textarea
    var str= $("textarea").val();

    //Convierte el string en html y lo asignas como objeto
    object = $('<div/>').html(str).contents();

    //Obtener atributo
    var obtenerAtributo = object.attr("data-base");

    //Asignar atributo
    object.attr("data-base","COP2");

    var NuevoAtributo = object.attr("data-base");

    alert( 'Atributo antiguo : ' + obtenerAtributo + ' - Atributo cambiado : ' + NuevoAtributo);
0

Anexo te dejo un ejemplo simple pero funcional de lo que hace la pagina que das como muestra:

Ejemplo:

$(document).ready(function() {

  $input=$("input");
  $div=$("#myDiv");
  $msg=$("#myMsg");

  $("input").on("change", function(){
    $div.css("border-radius", "0"+
      $input[0].value+"px 0"+
      $input[1].value+"px 0"+
      $input[2].value+"px 0"+
      $input[3].value+"px");

    $div.css("border", "0"+
      $input[4].value+"px solid #000000");

    $msg.html(
      "border-radius: "+$div.css("border-radius")+
      "<br>-moz-border-radius: "+$div.css("-moz-border-radius")+
      "<br>-webkit-border-radius: "+$div.css("-webkit-border-radius")+
      "<br>border: "+$div.css("border"));
  });
  
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="width:100%;">
<tr><td>
<input id="SI" placeholder="Superior izquierda">px<br>
<input id="SD" placeholder="Superior derecha">px<br>
<input id="II" placeholder="Inferior izquierda">px<br>
<input id="ID" placeholder="Inferior derecha">px<br>
<input id="AB" placeholder="Ancho del borde">px<br>
</td><td>
<div id="myDiv" style="margin:auto;
 width:100px; height:100px; 
 background-color:#e7a61a;
 border-radius: 0px 0px 0px 0px;
 -moz-border-radius: 0px 0px 0px 0px;
 -webkit-border-radius: 0px 0px 0px 0px;
 border: 0px solid #000000;">
</div>
</td></tr>
<tr><td colspan="2">
<div id="myMsg" style="border:1px solid"></div>
</td></tr>
</table>

Espero te sirva, Saludos!! ;))...

2
  • muchas gracias!!!!! me sirvio Commented el 9 jul. 2018 a las 1:58
  • @JuanDavidDelgadoJ, gracias por tu comentario sin embargo debes evitarlos en lo posible, en su defecto si te fue de ayuda marca la respuesta como aceptada, de esta forma futuros usuarios la encontrarán como primera opción.
    – fwBasic
    Commented el 9 jul. 2018 a las 7:08

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.