Обновлять текст в зависимости от стоимости, выбранной в списке *БЕЗ JAVASCRIPT*

В работе мы встречаемся с интересной проблемой: у нас есть страница со списком desplegable, что, когда он меняет отборный выбор, обновляет стоимость серьезной одной элементов начиная со стоимости переменной в JSON.

HTML - что-то как это (упрощенное):

<select id="paises">
  <option value="chile">Chile</option>
  <option value="colombia">Colombia</option>
  <option value="ecuador">Ecuador</option>
</select>

<div id="valores">
  Pais: <span id="pais"></span><br/>
  Teléfono: <span id="telefono"></span><br/>
  Email: <span id="email"></span>
</div>

И JSON - что-то похожее на это (упрощенное):

info = {
    "chile": {
        "nombre": "Chile",
        "telefono": "123456789",
        "email": "chile@email.com"
    },
    "colombia": {
        "nombre": "Colombia",
        "telefono": "192837465",
        "email": "colombia@email.com"
    },
    "ecuador": {
        "nombre": "Ecuador",
        "telefono": "987654321",
        "email": "ecuador@email.com"
    }
}

Код язык сценариев JavaScript не является значимым для вопроса, но идея простая: в зависимости от отборной страны, они станут отвечающими совремнным требованиям span. Например, если выбирается Чили, span с id "страна" будет содержать "Чили", span с id "телефон" покажет "123456789", и т.д., и т.д.

Сейчас эта страница двинулась в новый CMS и, в пользу различных мотивов, мы ограничены в компонентах, которые мы можем использовать, и ни один из них не позволяет присоединять язык сценариев JavaScript (ни даже inline), только позволяет нам вводить HTML и CSS.


Тогда вопрос был бы: как возможно симулировать описанное поведение достигни, но исключительно используя HTML+CSS без какого-либо типа языка сценариев JavaScript или JSON?

Относительно HTML и CSS у нас нет ограничений: мы можем реорганизовать / организовывать элементы, как давайте хотеть, можем добавлять новые элементы / удалять уже существующие элементы, можем добавлять так код, как давайте хотеть... в то время как он не будет содержать никакого рукописного шрифта, только HTML и CSS.

Например, мы в конце концов находим решение (я буду иметь ее в ответах внизу, если в кого-то он будет служить ему вдохновением) заменяя select из-за списка ul, преобразовывая JSON в CSS (с :before и content) и с серией inputs спрятавшие..., но проблема состоит в том, что он занимает слишком много место, и мы хотим знать, был ли другой различный метод.

21
задан 08.06.2016, 07:37
3 ответа

Хотя изобретательное решение, больше, чем проблема места, я вижу ему два затруднения:

  • Немного сложная поддержания: ты вводишь контент в стили, а следовательно есть больше сайтов, где будет нужно изменять информацию.
  • Мало доступный: после того, как - часть стиля, данные не индексированы поисковыми службами, он не "percibible" (eg: не возможно читать из-за автоматического читателя) и, что хуже, не возможно копировать, что-то фундаментальное для данных о контакте.

Я предлагаю тебе давать ему возвращение твоему предложению и оставлять информацию внутри тела html. Нечто похожее:

div#paises > div { display: none; }
#chile:checked~ div#chile { display: block; }
#colombia:checked~ div#colombia { display: block; }
#ecuador:checked~ div#ecuador { display: block; }
<ul id="dropdown">
    <li>
      Selecciona un país
      <ul>
        <li><label for="chile">Chile</label></li>
        <li><label for="colombia">Colombia</label></li>
        <li><label for="ecuador">Ecuador</label></li>
      </ul>
    </li>
</ul>

<div id="paises">
      <input type="radio" name="paises" id="chile" />
      <input type="radio" name="paises" id="colombia" />
      <input type="radio" name="paises" id="ecuador" />
      <div id="chile">
        País: Chile <br/>
        Teléfono: 123456789 <br/>
        Email: chile@email.com
      </div>
      <div id="colombia">
        País: Colombia <br/>
        Teléfono: 987654321 <br/>
        Email: colombia@email.com
      </div>
      <div id="ecuador">
        País: Ecuador <br/>
        Teléfono: 192837465 <br/>
        Email: ecuador@email.com
      </div>
</div>
8
ответ дан 24.11.2019, 14:12
  • 1
    Интересный, я не hab и # 237; в ca и # 237; do, в котором ты не можешь выбирать текст. Я поместил и # 233; ndolo в HTML s и # 237; что podr и # 237; чтобы использовать :target, как предлагает Альваро, и избавляться от label и радио вместо того чтобы иметь 30 реестров в c и # 243; я говорю, он не уберегается в месте, но - м и # 225; s я отлаживаю – blonfu 08.06.2016, 12:51
  • 2
    #201; sta - soluci и # 243; n м и # 225; s чистая и доступная. Я буду бросать глаз, но буду верить в то, что немного как это сочетаемое с: target (чтобы избегать иметь все inputs) вот то, что мы закончим тем, что будем делать. – Alvaro Montoro♦ 08.06.2016, 13:45

Это решение, которое мы находим (я оставляю ее здесь, если он помогает людям видеть, что является тем, что мы искали и(или), если он служит ссылкой), хотя проблема, которую он представляет, что осложняется много (список стран не только 3, а 30) и заканчивает тем, что нуждается много в дополнительном коде.

Конечно было бы возможно делать что-то с :target вместо :checked и он упростил бы вещи (могли бы меняться все label из-за a и были бы предотвращены все checkboxes).

Идея - следующая:

  • В HMTL:
    • Мы прекращаемся select и мы симулируем список desplegable используя ul;
    • Мы добавляем один input типа radio из-за каждой страны, перед полями, которые мы хотим, чтобы они стали отвечающими совремнным требованиям;
    • В каждом li ul, мы добавляем один label для каждого input который мы создаем в предыдущем шаге;
  • В CSS:
    • Мы добавляем различные стили, чтобы симулировать dropdown;
    • Используя псевдо-класс :checked и селектор ~, мы добавляем правила CSS, которые добавят контент в зависимости от радио, которое будет выбрано в каждом моменте.

Код остается таким в конце концов:

#dropdown, #dropdown > li > ul  { 
  width:200px; 
  overflow:visible;
  line-height:20px; 
  border:1px solid gray;
  background:white;
  list-style:none;
  padding-left:0;
  margin-left:0;
  position:relative;
}

#dropdown:after {
  content:"\25bc";
  position:absolute;
  font-size:0.75em;
  right:2px;
  top:0;
}

#dropdown > li { 
  margin-left:0; 
  line-height:20px;
  font-size:0.9em;
}

#dropdown > li > ul {
  display:none;
}


#dropdown > li:hover > ul {
  display:block;  
  position:absolute;
  left:-1px;
}

#dropdown > li > ul > li {
  margin-left:0; 
  line-height:20px;
  padding-left:2px;
}

#dropdown > li > ul > li:hover {
  background-color:rgba(0,0,0,0.05);
}

#dropdown > li > ul > li label {
  display:block;
}

input[name="paises"] { display:none; }


#chile:checked ~ #pais:before { content:"Chile"; }
#chile:checked ~ #telefono:before { content:"123456789"; }
#chile:checked ~ #email:before { content:"chile@email.com"; }
#colombia:checked ~ #pais:before { content:"Colombia"; }
#colombia:checked ~ #telefono:before { content:"987654321"; }
#colombia:checked ~ #email:before { content:"colombia@email.com"; }
#ecuador:checked ~ #pais:before { content:"Ecuador"; }
#ecuador:checked ~ #telefono:before { content:"192837465"; }
#ecuador:checked ~ #email:before { content:"ecuador@email.com"; }
<ul id="dropdown">
  <li>
    Selecciona un país
    <ul>
      <li><label for="chile">Chile</label></li>
      <li><label for="colombia">Colombia</label></li>
      <li><label for="ecuador">Ecuador</label></li>
    </ul>
  </li>
</ul>

<div>
  <input type="radio" name="paises" id="chile" />
  <input type="radio" name="paises" id="colombia" />
  <input type="radio" name="paises" id="ecuador" />
  País: <span id="pais"></span><br/>
  Teléfono: <span id="telefono"></span><br/>
  Email: <span id="email"></span>
</div>
6
ответ дан 24.11.2019, 14:12
  • 1
    Очень хороший soluci и # 243; n. Очень обладающая богатым воображением. Правда состоит в том, что мне не приходит в голову форма м и # 225; s простая делания этого. Но я буду давать ему возвращение, он мне понравился. – Asier Villanueva 08.06.2016, 10:32

Используя только селектор: target, возможно упрощать немного.

body {background: #f3f5f6;}
ul {
    margin: 0;
    list-style: none;
    padding: 0;
    width: 200px;
}
ul#dropdown {float: left;}
ul#dropdown li {
    position: relative;
    line-height:30px;
    z-index: 10;
    background: white;
    text-indent: 10px;
    border-top: 1px solid #eee;
}
ul#dropdown > li:before {
    content: "";
    border-color: #7d7d7d;
    border-style: solid;
    border-width: 0 1px 1px 0;
    width: 6px;
    height: 6px;
    position: absolute;
    right: 15px;
    top: 11px;
    transform: rotate(45deg);
    z-index: 100;
}
ul#dropdown > li:hover:before {transform: rotate(-135deg);top: 13px;}
ul#dropdown li a {display: block;}
ul#dropdown ul {display: none;}
ul#dropdown li:hover ul {display: block;}
ul#dropdown ul li:hover {background: #eee;}
div#paises {float: left;}
div#paises > div {
    background: white;
    width: 200px;
    margin-left: 10px;
    padding: 15px;
    display: none;
}
:target {display: block !important;}
<ul id="dropdown">
  <li>Selecciona un país
    <ul class="selector">
      <li><a href="#chile">Chile</a></li>
      <li><a href="#colombia">Colombia</a></li>
      <li><a href="#ecuador">Ecuador</a></li>
    </ul>
  </li>
</ul>

<div id="paises">
  <div id="chile">
    País: Chile <br/>
    Teléfono: 123456789 <br/>
    Email: chile@email.com
  </div>
  <div id="colombia">
    País: Colombia <br/>
    Teléfono: 987654321 <br/>
    Email: colombia@email.com
  </div>
  <div id="ecuador">
    País: Ecuador <br/>
    Teléfono: 192837465 <br/>
    Email: ecuador@email.com
  </div>
</div>
3
ответ дан 24.11.2019, 14:12