Question

我在yii2中有一些广播列表，如下所示-

function compareDistances($a, $b)
{
    $a = $a['distance'];
    $b = $b['distance'];

    if ($a == $b) return 0;
    return ($a < $b) ? -1 : 1;
}

function geocode($address){

    // url encode the address
    $address = urlencode($address);

    $apiKey = "apikey";

    // google map geocode api url
    $url = "https://maps.googleapis.com/maps/api/geocode/json?address={$address}&key={$apiKey}";

    // get the json response
    $resp_json = file_get_contents($url);

    // decode the json
    $resp = json_decode($resp_json, true);

    // response status will be 'OK', if able to geocode given address 
    if($resp['status']=='OK'){

        // get the important data
        $lati = isset($resp['results'][0]['geometry']['location']['lat']) ? $resp['results'][0]['geometry']['location']['lat'] : "";
        $longi = isset($resp['results'][0]['geometry']['location']['lng']) ? $resp['results'][0]['geometry']['location']['lng'] : "";
        $formatted_address = isset($resp['results'][0]['formatted_address']) ? $resp['results'][0]['formatted_address'] : "";

        // verify if data is complete
        if($lati && $longi && $formatted_address){

            // put the data in the array
            $data_arr = array();            

            array_push(
                $data_arr, 
                $lati, 
                $longi, 
                $formatted_address
            );

            return $data_arr;

        }else{
            return false;
        }

    }

    else{
        echo "<strong>ERROR: {$resp['status']}</strong>";
        return false;
    }
}

function distanceCalculation($point1_lat, $point1_long, $point2_lat, 
$point2_long, $unit = 'km', $decimals = 2) {
    // Calculate the distance in degrees
    $degrees = rad2deg(acos((sin(deg2rad($point1_lat))*sin(deg2rad($point2_lat))) + (cos(deg2rad($point1_lat))*cos(deg2rad($point2_lat))*cos(deg2rad($point1_long-$point2_long)))));

    // Convert the distance in degrees to the chosen unit (kilometres, miles or nautical miles)
    switch($unit) {
        case 'km':
            $distance = $degrees * 111.13384; // 1 degree = 111.13384 km, based on the average diameter of the Earth (12,735 km)
            break;
        case 'mi':
            $distance = $degrees * 69.05482; // 1 degree = 69.05482 miles, based on the average diameter of the Earth (7,913.1 miles)
            break;
        case 'nmi':
            $distance =  $degrees * 59.97662; // 1 degree = 59.97662 nautic miles, based on the average diameter of the Earth (6,876.3 nautical miles)
}
    return round($distance, $decimals);
}

if (mysqli_num_rows($result) > 0) {

    $output = '';
    $distance_output = '';

$output .= "<div class='sectionBox'>";
$distance_output .= "<div class='sectionBox'>";

    if ($storefrontTypeSearch) {
        $output .= "<h3>" . ucwords($storefrontTypeSearchFormatted) . "</h3>";
        $distance_output .= "<h3>" . ucwords($storefrontTypeSearchFormatted) . "</h3>";
    } else {
        $output .= "<h3>Storefronts</h3>";
        $distance_output .= "<h3>Events</h3>";
    }

    $output .= "<div class='sectionBoxInner'>";
    $distance_output .= "<div class='sectionBoxInner'>";

        $rank = 0;

        while ($row = mysqli_fetch_array($result)) {

            $rank++;

            $address = "";

            if (strpos($row['full_location'], ',') !== false) {
                $arr = explode(", ", $row['full_location']);
                if (count($arr) > 1) {
                    $address = implode(", ", array_slice($arr, -2));
                }
            } else {
                $address = $row['full_location'];
            }

            if (strpos($row['full_location'], 'Hong Kong') !== false) {
                $address = "Hong Kong";
            }

            if (($counter % 30) == 0) {
                $output .= "<div style='width:100%;'>";
            }

            if ($location) {

                if ($row['lat'] && $row['lng']) {

                    $location_output = geocode($location);

                    $point1 = array("lat" => $location_output[0], "long" => $location_output[1]);
                    $point2 = array("lat" => $row['lat'], "long" => $row['lng']);
                    $mi = distanceCalculation($point1['lat'], $point1['long'], $point2['lat'], $point2['long'], 'mi');

                    $storefronts_with_distances[] = [
                        "distance" => $mi,
                        "storefront_id" => $row['id'],
                        "storefront_name" => $row['name'],
                        "address" => $address
                    ];

                }

            }


        if ($location) {

            usort($storefronts_with_distances, 'compareDistances');
            foreach ($storefronts_with_distances as $storefront_with_distance) {

                if (($storefront_with_distance_counter % 30) == 0) {
                    $distance_output .= "<div style='width:100%;'>";
                }

                $distance_output .= "<a href='https://www.example.com/" . $storefront_with_distance['wp_permalink'] . "'>";

                        $distance_output .= "<div class='exploreTileEvent'>";

                        $distance_output .= "<div class='exploreTileTitle'>";
                        $distance_output .= "<span style='display:block;font-family:circularStdMedium;'>" . $storefront_with_distance['storefront_name'] . "</span>";
                        $distance_output .= "</div>";
                    $distance_output .= "</div>";
                $distance_output .= "</a>";

                if (($storefront_with_distance_counter % 30) == 29) {
                    $distance_output .= "</div>";
                }

                $storefront_with_distance_counter++;

            }

            if (($storefront_with_distance_counter % 30) !== 29) {
                $distance_output .= "</div>";
            }

            $distance_output .= "</div>";

            echo $distance_output;

        }

} else {
   echo "<div style='clear:both;'>No results found.</div>";
}

它溶解为遵循HTML

<?php 
echo $form->field($model, 'wp_spost1')->radioList(['Yes'=>'Yes','No'=>'No','NA'=>'NA'])->label(false);
?>

我要使用的CSS在下面-

<div id="workpermit-wp_spost1" aria-required="true" aria-invalid="false"><div class="radio"><label><input type="radio" name="Workpermit[wp_spost1]" value="Yes" data-index="0"> Yes</label></div>
<div class="radio"><label><input type="radio" name="Workpermit[wp_spost1]" value="No" data-index="1"> No</label></div>
<div class="radio"><label><input type="radio" name="Workpermit[wp_spost1]" value="NA" checked="" data-index="2"> NA</label></div></div>

电流输出

我想要实现的是，当选中单选按钮时，边框应为10px宽，并且（文本和边框的）颜色均应更改。但是我无法定位边框和标签。

请帮助。

编辑

我尝试了不同的设置，并对HTML和CSS进行了如下更改- HTML-（请注意以前和现在的标签）

.radio label
{
  position:relative;
  display: inline-block;
  margin: 2px 2px;
  padding: 2px;
  width: 35px;
  background: #ffffff;
  border: 1px solid #008eff;
  border-radius: 4px;
}


.radio input[type="radio"]:checked
{

  box-shadow: 0 0 0 3px orange;

}

.radio input:checked {
  color: red;
  border: 10px solid #fff;
}

CSS

<div id="workpermit-wp_spost1" aria-required="true" aria-invalid="false">
<div class="radio"><input type="radio" name="Workpermit[wp_spost1]" value="Yes"><label>Yes</label></div>
<div class="radio"><input type="radio" name="Workpermit[wp_spost1]" value="No"><label>No</label></div>
<div class="radio"><input type="radio" name="Workpermit[wp_spost1]" value="NA"><label>NA</label></div>
</div>

此组合有效。但是很遗憾，我无法手动更改HTML。因此，HTML我无法更改。无论如何，我们可以选择以前的HTML设置上的标签吗？

Answer 1

您可以更改HTML。如果您想要最后的代码

<div id="workpermit-wp_spost1" aria-required="true" aria-invalid="false">
<div class="radio"><input type="radio" name="Workpermit[wp_spost1]" value="Yes"><label>Yes</label></div>
<div class="radio"><input type="radio" name="Workpermit[wp_spost1]" value="No"><label>No</label></div>
<div class="radio"><input type="radio" name="Workpermit[wp_spost1]" value="NA"><label>NA</label></div>
</div>

您可以这样做

echo $form->field($model, 'wp_spost1')->radioList(['Yes'=>'Yes','No'=>'No','NA'=>'NA'], ['item' => function($index, $label, $name, $checked, $value) {
                if ($checked) {
                    $checkedText = 'checked="checked"';
                } else {
                    $checkedText = '';
                }
                $return = '<div class="radio">';
                $return .= ' <input id="workpermit-wp_spost1_' . $index . '" type="radio" name="' . $name . '" value="' . $value . '" ' . $checkedText . '>';
                $return .= '<label for="workpermit-wp_spost1_' . $index . '">'. ucwords($label).' </label></div>';

                return $return;
            }
        ])->label(false);

更改yii2中的广播列表的CSS

1 个答案: