Saya memiliki pembuat situs web yang telah saya buat dan saya memiliki div yang membuat tombol untuk digunakan orang. Saya ingin mereka dapat mengubah radius dan itu ditampilkan secara real time di layar.

Saya memiliki hal-hal lain yang berfungsi seperti font-family, color, font-size dan sebagainya. Mereka semua bekerja dengan baik. Tapi saya tidak bisa mengubah radius kecuali ke 0. Itu akan berubah dari sesuatu ke 0. Tapi itu tidak akan berubah untuk mengatakan 20px atau 30px dll..

Berikut potongan kodenya.

CSS Asli untuk memulai:

 .button {
    border-radius: <?php echo $r['btnradius'];?>px;
    -moz-border-radius: <?php echo $r['btnradius'];?>px;
    -webkit-border-radius: <?php echo $r['btnradius'];?>px;
    box-shadow: 4px 4px 6px rgba(0, 0, 0, 1.0);
    -moz-box-shadow: 4px 4px 6px rgba(0, 0, 0, 1.0);
    -webkit-box-shadow: 4px 4px 6px rgba(0, 0, 0, 1.0);
    color: #<?php if($r['btntcolor']!='')echo $r['btntcolor'];else echo"FFFFFF";?>;
    border-style: solid;
    border-width: 2px;
    border-color: #000000;
    text-decoration: none;
    background: #<?php if($r['btncolor']!='')echo $r['btncolor'];else echo"00dd10";?>;
    display:inline-block;
    font-size: <?php if($r['btntsize']!='')echo $r['btntsize'];else echo"22";?>px;
    padding: 5px 15px 5px 15px;
    max-width: 95%;
 }

Pemilihan ukuran radius:

 <SELECT id="btnradius" name="btnradius" class="form-control"
 style="width:90px; font-size:10px;">
 <option value="<?php echo $r['btnradius']?>"> <?php echo $r['btnradius']? </option>
 <option value="0">0</option>
 <option value="10">10</option>
 <option value="20">20</option>
 <option value="30">30</option>
 <option value="40">40</option>
 <option value="50">50</option>
 <option value="60">60</option>
 </select>

Kode yang harus diubah dengan cepat:

 <div class="button blank4 color_change tcolor_change tsize_change   
 btnradius" style="border-radius: <?php echo $r['btnradius'];?>px; -moz-
 border-radius: <?php echo $r['btnradius'];?>px; -webkit-border-radius: <?
 php echo $r['btnradius'];?>px;" id="btncolor"><?php echo $r['subtext4']?> 
 </div> 

Script untuk mengubah kode di atas dengan cepat:

$('#btnradius').on('change', function (e) {
var optionSelected = $("option:selected", this);
var valueSelected = this.value;
$(".btnradius").css("border-radius", valueSelected);
$(".btnradius").css("-moz-border-radius", valueSelected);
$(".btnradius").css("-webkit-border-radius", valueSelected);
 });
2
Randy Thomas 10 Maret 2017, 01:55

2 jawaban

Jawaban Terbaik

Anda kehilangan akhiran px di properti CSS Anda:

$(".btnradius").css("border-radius", valueSelected + "px");

Biola

2
Roko C. Buljan 9 Maret 2017, 23:01

Saya percaya masalah ini sebenarnya seperti yang Anda nyatakan.

Tapi saya tidak bisa mengubah radius kecuali ke 0. Ini akan berubah dari sesuatu ke 0. Tapi itu tidak akan berubah untuk mengatakan 20px atau 30px dll.

Sekarang JavaScript Anda mengatakan

$('#btnradius').on('change', function(e) {
  var optionSelected = $("option:selected", this);
  var valueSelected = this.value; //<-- here is the problem
  $(".btnradius").css("border-radius", valueSelected);
});

Catat sumur this.value yang akan menjadi nilai dari option yang dipilih di kotak tarik-turun Anda. Sekarang semua nilai tidak memiliki px dari akhir nilai.

Ini dapat diubah dengan dua cara.

  1. Ubah value dari option tag menjadi #.px (yaitu 60px)
  2. Ubah opsi valueSelected untuk membaca var valueSelected = this.value + 'px';

Alasan 0 berfungsi adalah 0 tidak memerlukan penentu unit. Namun semua nilai lainnya akan (yaitu px, em, %, dll)

1
Nico 9 Maret 2017, 23:00