Может ли элемент кнопки HTML наследовать его значение от родителя?

Question

Возможно ли, чтобы кнопка наследовала свое свойство value из своего родительского элемента?

У меня есть 3 кнопки в li, и я хочу получить значение, общее для всех кнопок в li, а также нажатие определенной кнопки (что я мог бы выполнить с уникальными идентификаторами). Открыта для любой формы реструктуризации, чтобы я мог легко достичь этого.

Заранее благодарен!

Редактировать: Ниже приведен пример того, над чем я работаю, значение li - это значение, которое я хочу получить для всех трех кнопок, а также некоторые определяющие детали того, какое действие было выполнено.

side += "<li href='#' class='list-group-item' value="+friend.id+" style='height:75px'>"; 
side += "<button type='button' onclick='sidebarUserOptions(this)' style='height:95%; width:15%;'>View</button>"; 
side += "<button type='button' onclick='sidebarUserOptions(this)' style='height:95%; width:15%;'>Visit</button>"; 
side += "<button type='button' onclick='sidebarUserOptions(this)'style='height:95%; width:15%;'>Edit</button>"; 
side += "</li>"; 

Answer 1

Теоретически да, с attr и CSS variables:

#parent { 
 
    --value: attr(data-value); 
 
} 
 
#parent > button::after { 
 
    content: var(--value); 
 
}

<div id="parent" data-value="Hello!"> 
 
    <button type="button"></button> 
 
    <button type="button"></button> 
 
</div>

Однако, обратите внимание, что:

• Ни одна крупная реализация не поддерживает attr на свойства диффере чем content.
• Переменные CSS в настоящее время поддерживаются только Firefox и Safari.
• Псевдоэлементы CSS должны использоваться только для декоративных целей, а не для вставки содержимого.

Answer 2

Не требуется перестройка. Ключ состоит в обнаружении события click на li вместо button. Вы можете использовать event.target в функции щелчка, чтобы получить доступ к нажатой кнопке. Вот fiddle демонстрация концепции. Первая функция doToAll - это просто вспомогательный метод для итерации по набору элементов dom, а выходной div - для простого способа показать результат функции.

HTML:

<div id="output"></div> 
<ul> 
<li data-info="first li"> 
    <button> 
    One 
    </button> 
    <button> 
    Two 
    </button> 
    <button> 
    Three 
    </button> 
</li> 
<li data-info="second li"> 
    <button> 
    One 
    </button> 
    <button> 
    Two 
    </button> 
    <button> 
    Three 
    </button> 
</li> 
</ul> 

SCRIPT:

function doToAll(elems, callback){ 
    var len = elems.length; 
    while(--len > -1){ 
    callback(elems[len]); 
    } 
} 

var lis = document.querySelectorAll('li'), 
    output = document.getElementById('output'); 

doToAll(lis, function(li){ 
    li.addEventListener('click', function(e){ 
    var tgt = e.target, //get the element that was clicked on 
     liparent = this; //the click event is bound to the li, so 'this' still refers to the list item and not the button 
    if(tgt.tagName == "BUTTON"){//check to make sure a button was clicked, and not something else inside the li 
     output.textContent = tgt.textContent + ', ' + liparent.getAttribute('data-info'); 
     //reports a piece of data from the button and the li 
    } 
    }) 
}) 

Answer 3

В вашем OnClick (sidebarUserOptions) Вы можете обратиться к этой переменной, получить родительский узел, а затем получить значение из этого родительского узла ,

Таким образом, с помощью JQuery:

$(this).parent().attr('value'); 

Here is a working CodePen example