2011-05-24 27 views
12

tengo una pequeña función de javascript que hace algo cuando uno hace clic en el elemento que tiene onclick esa función.javascript establecer elemento color de fondo

mi problema es: quiero que, en esta función, establezca un color de fuente para el elemento html que tiene esta función onclick. pero no lo logro mi código:

<script type="text/javascript"> 
    function selecteazaElement(id,stock){ 
     document.addtobasket.idOfSelectedItem.value=id; 
     var number23=document.addtobasket.number; 
     number23.options.length=0; 
     if (stock>=6) stock=6; 

     for (i=1;i<=stock;i++){ 
      //alert ('id: '+id+'; stock: '+stock); 
      number23.options[number23.options.length]=new Option(i, i); 
     } 
    } 
</script> 

y cómo lo uso:

<li id = "product_types"> 
    <a href="#" onclick='selecteazaElement(<?= $type->id; ?>,<?= $type->stock_2; ?>);'><?= $type->label; ?></a> 
</li> 

alguna sugerencia? ¡Gracias!

he agregado otra función (jquery uno) que hace parcialmente lo que necesito. El nuevo problema es: quiero que ese color de fondo se establezca solo en el último elemento en el que se hizo clic, no en todos los elementos en los que haga clic. código de arriba:

$(document).ready(function() { 
    $('.product_types > li').click(function() { 
    $(this) 
     .css('background-color','#EE178C') 
     .siblings() 
     .css('background-color','#ffffff'); 
    }); 
}); 

¿Alguna idea de por qué?

gracias!

+0

echarnos un enlace si puede – danjah

+0

¿cómo se ve cuando se ha rendido? Si id y stock no son numéricos, necesita cotizaciones. Además, si desea que el enlace cambie el color de fondo, cambie parentNode.className o parentNode.style.backgroundColor en su lugar – mplungjan

+0

cuál es el valor de los paramerters que está pasando, lo que obtenemos si hacemos algo de alerta (id); alert (stock) – ankur

Respuesta

8

Yo sugeriría

$(document).ready(function() { 
    $('.product_types > li').click(function() { 
     $('.product_types > li').css('background-color','#FFFFFF'); 
     $(this).css('background-color','#EE178C'); 
    }); 
}); 
0

El 'alcance' de la función cuando se invoca es el elemento se hace clic, por lo que debe ser capaz de simplemente hacer:

function selecteazaElement(id,stock){ 

document.addtobasket.idOfSelectedItem.value=id; 
var number23 = document.addtobasket.number; 
number23.options.length=0; 
if (stock>=6){ 
    stock=6; 
} 
for (var i=1;i<=stock;i++){ 
    //alert ('id: '+id+'; stock: '+stock); 
    number23.options[number23.options.length]=new Option(i, i); 
} 

// Alter 'this', which is the clicked element in this case 
this.style.backgroundColor = '#000'; 
} 
+0

tampoco funciona así. He editado mi pregunta, en caso de que pueda darme algunas pistas. ¡Gracias! – dana

+0

prueba 'backgroundColor' en lugar de 'background-color'. La sintaxis de Javascript para las propiedades conjuntivas de CSS se denota en camelCase. – danjah

+0

Sin embargo mire en jQuery http://api.jquery.com/css/ .css ("color de fondo") – mplungjan

0
$(function() { 
    /*if product_types is a class of element ul the code below 
    will work otherwise use $('li.product_types') if it's a 
    class of li elements */ 
    $('.product_types li').click(function() { 
     //remove this class that causes background change from any other sibling 
     $('.altBackground').removeClass('altBackground'); 
     //add this class to the clicked element to change background, color etc... 
     $(this).addClass('altBackground'); 
    }); 
}); 

Que su css algo como esto:

<style type='text/css'> 
.altBackground { 
     background-color:#EE178C; 
    /* color: your color ; 
     foo: bar */ 
} 
</style> 
0

Adjunte un evento de clic jQuery a '#product_types a' que elimina una clase del elemento primario de todos los elementos que coinciden con ese selector ; luego, agregue la clase que contiene los estilos que desea a la matriz del elemento que acaba de hacer clic. Es un poco pesado y se puede hacer más eficiente, pero funciona.

que he hecho un ejemplo en jsFiddle: http://jsfiddle.net/jszpila/f6FDF/

2

Su elemento podría tener este código:

<li id = "product_types" onclick="selecteazaElement(this);" <...> </li>

Para cambiar el color de primer plano ese elemento:

function selecteazaElement(element) 
{ 
    element.style.foregroundColor="#SOMECOLOR"; 
} 

Si desea cambiar el color de fondo solo en el último elemento al que se hizo clic, cada elemento debe tener una identificación diferente. Sugeriría nombrar cada uno algo como product_types1, product_types2, ..., product_typesN, y así sucesivamente.A continuación, tiene una función restablecer:

function Reset() 
{ 
    for (var i = 1; i <= N; i = i + 1) 
    { 
     document.getElementById('product_types'+i).style.backgroundColor="#RESETCOLOR"; 
    } 
} 

Cuando llame a su selecteazaElement (este) la función, primero llama al Restablecer función, a continuación, establecer el nuevo elemento:

function selecteazaElement(element) 
{ 
    Reset(); 
    element.style.backgroundColor="#SOMECOLOR"; 
} 

esta manera todos los elementos que comienzan con product_types seguidos de un número se restablecerán a un color en particular, y solo el elemento al que se hizo clic tendrá el fondo cambiado.

0

Tal vez puedas probar:

//ON PAGE LOAD 
$(document).ready(function() { 

    //SELECT ALL OF THE LIST ITEMS 
    $('.product_types > li').each(function() { 

     //FOR EACH OF THE LIST ITEMS BIND A CLICK EVENT 
     $(this).click(function() { 

      //GRAB THE CURRENT LIST ITEM, CHANGE IT BG, RESET THE REST 
      $(this) 
      .css('background-color','#EE178C') 
      .siblings() 
      .css('background-color','transparent'); 
     }); 
    }); 
}); 

Si estoy en lo correcto, el problema es que el evento click se enganchan a todos los elementos de la lista (li). cuando se hace clic en un elemento de la lista, se dispara el evento en todos los elementos de la lista.

He añadido un sencillo .each() a su código. Recorrerá cada uno de los elementos de la lista y vinculará un evento a cada uno por separado.

Saludos,

-Robert Hurst

Cuestiones relacionadas