Come faccio a passare CSS con jQuery?

Ho il seguente codice:

$('#bc' + $.trim($this) + ' span.dashed-circle').css({ 'border' : '5px solid #000'});

Che viene attivato con un click.funzione().

Vorrei che essere un interruttore, così quando faccio clic sull’elemento, cambia il confine di ciò che ho sopra…ma quando è scattato di nuovo scompare o meglio imposta il confine ‘ ‘.

Pensieri?

Edit: dovrebbe essere stato esplicito…ma non voglio creare una classe CSS. La ragione di ciò è perché quando lo faccio, scombina la formattazione dell’elemento di stile. Sono sicuro che si tratta di qualche piccolo capriccio da qualche parte che avrebbe risolto il problema, ma io non sono interessato a guadare attraverso tutto il codice di base per risolvere piccole questioni di posizionamento con una nuova classe. Mi sarebbe molto meglio, basta modificare l’attributo di css direttamente – perché non interferire con il layout.

Edit2: Ecco il jsfiddle del codice sto cercando di modificare. Se noti, ho gli attributi CSS ultimo. Ma come faccio a lasciare che sia attivata ?

Edit3: Se qualcuno è interessato…l’interfaccia utente che verrà utilizzato è per la mia webapp – http://www.compversions.com

  • guarda jquery, toggle: api.jquery.com/toggle
  • Che è stata la prima cosa che ho fatto, ma a causa del modo in cui il mio codice è stato mi dà problemi. Che è il motivo per cui sono venuto qui.

 

4 Replies
  1. 16
    $("trigger-element").toggle( function() {
       $(element-to-change).css({ 'border' : '5px solid #000'});
       }, function () {
       $(element-to-change).css({ 'border' : 'none'});
    });

    Provare Questo

        $(document).ready(function() {
            $('#panels tr table tr').toggle(function () {
                var $this = $(this),
                    tr_class = 'dash-elem-selected';
                if (!$this.parent('thead').length) {
                    if ($this.hasClass(tr_class)) {
                        $this.removeClass(tr_class);
                        tr_class = 'removeClass';
                    } else {
                        $this.addClass(tr_class).siblings().removeClass(tr_class);
                        tr_class = 'addClass';
                    }
                    $this = $this.parents('td table').siblings('.sit-in-the-corner').text();
                    $('#bc' + $.trim($this) + ' span')[tr_class]('bc-dotted-to-solid');
                    $('#bc' + $.trim($this) + ' span.dashed-circle').css({ 'border' : '5px solid #000'});
                }
            }, function() {
       //This is your new function that will turn off your border and do any other proccessing that you might need.
    $('#bc' + $.trim($this) + ' span.dashed-circle').css({ 'border' : 'none'});
    });
        });
    • Penso che questo è il più vicino a quello che voglio fare.
    • Tuttavia, io non sono abbastanza sicuro di come applicarla al mio codice: jsfiddle.net/BMWZd/4 Pensieri?
    • Provare il mio edit sopra.
    • Ho provato e questo è quello che ho ottenuto…utilizzando il codice esattamente come si è incollato: jsfiddle.net/BMWZd/7 Il problema è che una volta che si fa clic su uno degli elementi della casella, rimane nero quando si sta tentando di rimuovere. Così l’altra funzione toggle non sembra funzionare (cioè, ‘border’ : ‘none’).
    • Ho votato per quello di sotto da lonesomeday
  2. 15

    Vorrei fare questo attraverso la definizione di un withborder di classe e di attivazione di tale classe.

    CSS:

    .withborder {
        border: 5px solid #000;
    }

    jQuery:

    $('#bc' + $.trim($this) + ' span.dashed-circle').click(function(){
        $(this).toggleClass('withborder');
    });
    • sono d’accordo con la tua analisi, tranne per una cosa. OP non ha detto che l’evento click era $('#bc' + $.trim($this) + ' span.dashed-circle')
    • Hartsock ho letto “quando faccio clic sull’elemento” come un riferimento all’elemento di cui al selettore.
    • La tua ipotesi potrebbe essere corretta, ma volevo solo farlo notare.
    • Grazie per questa risposta, ma non sono stato abbastanza specifico. Non voglio una nuova classe. Ho aggiornato la domanda per aggiungere una maggiore specificità.
    • Come ti piace, ma non c’è alcuna differenza funzionale tra fare questo in linea con css e con una classe.
    • So che la teoria dice che….ma in pratica, c’è qualche funky layout che ho in corso – che richiedono il posizionamento di altri elementi e roba del genere. Quindi scambio di classi crea caos – credo che la risposta breve.

  3. 12

    si potrebbe creare una classe CSS per questo

    .specialborderclass {
      border: 5px solid #000;
    }

    Quindi in javascript alternare la classe utilizzando jQuery toggleClass() metodo

    $('.yourSelector').toggleClass("specialborderClass");
    • non . nel nome della classe quando si chiama toggleClass(".specialvorderClass")
    • grazie.
    • Grazie per questo Giovanni, ma non voglio un’altra classe. Voglio semplicemente modificare il css. Ho aggiornato la domanda per riflettere questo.
    • Mi piace questa tecnica, soprattutto perché il codice è conciso e separa i CSS JavaScript. Complimenti!
  4. 4

    Utilizzare alterna.

    $("#IDOfElementYouClickOn").toggle(
          function(){$('#bc' + $.trim($this) + ' span.dashed-circle').css({ 'border' : '5px solid #000'});},
          function(){$('#bc' + $.trim($this) + ' span.dashed-circle').css({ 'border' : ''});}
        );
    • Adam, mi piace quello che hai fatto qui….ma io non sono molto sicuro di come applicare al mio codice. Vedere jsfiddle.net/BMWZd/4 per quello che sto lavorando con. Ho anche aggiornato di nuovo la domanda.

Lascia un commento